JavaScript Javascript InnerHtml not working

[anishtulsyan22]

Hi All,

My code is as follows:

function show_Suggestions_first_product(list) {
let listData;
if (!list.length) {
userValue = inputBox.value;
listData = '<li>' + userValue + '</li>';
} else {
listData = list.join('');
}
console.log(listData);
// This Line of code is not working. Need to work on innerHTML section.
// document.querySelectorAll("first_autocomplete_box").innerHTML = listData;
suggbox.innerHTML = listData;
// console.log(suggbox.innerHTML);
}

In this code , I am getting the data properly in the list parameter. but in the last line of the code, where I am trying to use:
suggbox.innerHTML = listData;
In this line of code innerHTML does not seems to work.

Any help is appreciated.
Thanks in Advance.

 

[Padonak]

document.querySelectorAll

document.querySelectorAll not single element but the whole collection returned and you can not set it's innerHTML

("first_autocomplete_box")

what elements match this selector? is this a tag name or a class name? class name must be started with dot like ('.first_autocomplete_box')

 

[anishtulsyan22]

Hi Padonak,

This is the code :
const suggbox = document.getElementById("first_autocomplete_box");
So it's a ID Name.

Regards,
Anish.

 

[anishtulsyan22]

Hi Padonak,

This is the code :
const suggbox = document.getElementById("first_autocomplete_box");
So it's a ID Name.
The HTML code from where it is accessed is :

<div class="autocom_box" id="first_autocomplete_box"></div>

Regards,
Anish.

 

[Padonak]

function show_Suggestions_first_product(list) {
let listData;
if (!list.length) {
userValue = inputBox.value;
listData = '<li>' + userValue + '</li>';
} else {
listData = list.join('');
}
console.log(listData);

Hi there, Anish ) There is one thing I didn't notice from the very first sight. You are trying to access a local scope variable(declared within the function block of code) from outside this function. There are two ways to solve it:

• declare this variable on the top level(outside the function)
• use this variable inside the function

 

[anishtulsyan22]

Hi Padonak,

I didn't get what variable you are referring to.

Please see my whole code below :
const compare_search_url = window.location.href const search_wrapper_first = document.querySelectorAll(".search-input")[0]; const inputBox = document.getElementById("compare_input_first"); const suggbox = document.getElementById("first_autocomplete_box"); const compare_search_first_csrf = document.getElementsByName('csrfmiddlewaretoken')[0].value inputBox.onkeyup = (e) => { send_first_product_compare_data(e.target.value) } const send_first_product_compare_data = (first_product_search) => { $.ajax({ type: 'POST', url: 'first_product_compare_search/', data: { 'csrfmiddlewaretoken': compare_search_first_csrf, 'first_product_search': first_product_search, }, success: (res) => { first_product_result = res.first_product_result; if (Array.isArray(first_product_result)) { product_result = res.first_product_result if (Array.isArray(product_result)) { product_result = product_result.map((data) => { return data = '<li>' + data.brand + ' ' + data.model_name + '</li>'; }); search_wrapper_first.classList.add("active"); show_Suggestions_first_product(product_result); let searchList = suggbox.querySelectorAll("li"); for(let i=0; i < searchList.length; i++){ searchList[i].setAttribute("onclick", "select_first_product(this)"); } } } else{ search_wrapper_first.classList.remove("active"); } }, error: (err) => { console.log(err) } }) } function select_first_product(Model_Name){ let selectModel_Name = Model_Name.textContent; inputBox.value = selectModel_Name; search_wrapper_first.classList.remove("active"); } function show_Suggestions_first_product(list) { let listData; if (!list.length) { userValue = inputBox.value; listData = '<li>' + userValue + '</li>'; } else { listData = list.join(''); } console.log(listData); // This Line of code is not working. Need to work on innerHTML section. suggbox.innerHTML = listData; console.log(suggbox.innerHTML); }

suggbox.innerHTML = listData;
This line of code is not working.

Please help me out .

Regards,
Anish .

 

[anishtulsyan22]

Hi All,

I am closing this issue,

Actually it was a CSS Issue.

Thanks for your time and effort.

With Best Regards,
Anish Tulsyan.

 

[Padonak]

I didn't get what variable you are referring to.

Well, I was wrong about variable scope. You are posting code without using the </> tag, which makes it dificult to inspect. Please, don't hesitate to use this tag in your future posts. Greetings from Russia.