Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript JS is not executing one line of code

Hi,
I am trying to implement a Comparison feature with 3 text Boxes with autocomplete feature. For the 1st text box everything seems to be working fine as of now. For the second text box, autocomplete feature does not seems to work. After a bit of debugging, I came to analyse that, JS is skipping one line of code from executing. Why so ?

if (Array.isArray(product_result)) {
// console.log(product_result);
product_result = product_result.map((data) => {
return data = '<li>' + data.brand + ' ' + data.model_name + '</li>';
});
console.log("Anish");
search_wrapper_second.classList.add("active");
console.log("Anish");
show_Suggestions_second_product(product_result);
let searchList = suggbox_second.querySelecto

Everything seems to be working fine . but the line between the lines console.log("Anish") is not working. I am not able to understand, why this is happening.
Any help would be appreciated .

Thanks in Advance,
Best Regards,
Anish Tulsyan .



rAll("li");
 
Solution
Anish, what if you declare the var this way:

JavaScript:
const search_wrapper_second = document.querySelectorAll(".search_input")[1];

Try this example:

HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Ttl</title>
    <style>
    div{
    min-height: 30px;
    background-color: #abc;
    margin-top: 10px;
    }
    .active{
    background-color: crimson
    }
    </style>
  </head>
  <body>  
     <div class="search_input"></div>
    <div class="search_input"></div>
    <div class="search_input"></div>
    <script>
    const search_wrapper_second = document.querySelectorAll('.search_input')[1];
    setTimeout( () => search_wrapper_second.classList.add('active'), 2000);
    </script>
  </body>
</html>
Please post your code in code tags using the >_ button. Oh and don't put your text right inside the code 😁
How do you conclude JS is "skipping" that particular line ? Seems far more likely it either has an error (did you check the Console output ?) or it's executed but just not doing what you think it should do. Is there indeed an element search_wrapper_second at that moment in time ?
 
Last edited by a moderator:
I don't know whether it's executed or not, but that line of code is not doing what is was suppose to do .
Variable declarations are as follows:
>_
const search_wrapper_second = document.querySelector(".search_input");
const compare_search_second_form = document.getElementById('compare_search_second_form')
const inputBox_second = document.getElementById("second_search_input");
const suggbox_second = document.getElementById("second_autocomplete_box");
>_

In console output, I was getting the output "Anish" with their line numbers, but the line
>_
search_wrapper_second.classList.add("active");
>_
was not doing what is was suppose to do .
 
I don't know whether it's executed or not, but that line of code is not doing what is was suppose to do .
Variable declarations are as follows:
>_
const search_wrapper_second = document.querySelector(".search_input");
const compare_search_second_form = document.getElementById('compare_search_second_form')
const inputBox_second = document.getElementById("second_search_input");
const suggbox_second = document.getElementById("second_autocomplete_box");
>_

In console output, I was getting the output "Anish" with their line numbers, but the line
>_
search_wrapper_second.classList.add("active");
>_
was not doing what is was suppose to do .
Hi there,

One thing to note when using document.querySelector():

There's two versions of this: document.querySelector() and document.querySelectorAll()

Use document.querySelector() when you are trying to get a specific element with an id, or if you are trying to get just the first instance of an element of a particular class.

use document.querySelectorAll() when you are trying to get all elements with a specific class.
 
Anish, what if you declare the var this way:

JavaScript:
const search_wrapper_second = document.querySelectorAll(".search_input")[1];

Try this example:

HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Ttl</title>
    <style>
    div{
    min-height: 30px;
    background-color: #abc;
    margin-top: 10px;
    }
    .active{
    background-color: crimson
    }
    </style>
  </head>
  <body>  
     <div class="search_input"></div>
    <div class="search_input"></div>
    <div class="search_input"></div>
    <script>
    const search_wrapper_second = document.querySelectorAll('.search_input')[1];
    setTimeout( () => search_wrapper_second.classList.add('active'), 2000);
    </script>
  </body>
</html>
 
Solution

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom