• 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.
    • 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

anishtulsyan22

anishtulsyan22

New Coder
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
Padonak
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>
Sort by date Sort by votes
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:
Upvote 0 Downvote
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 .
 
Upvote 0 Downvote
anishtulsyan22 said:
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 .
Click to expand...
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.
 
Upvote 0 Downvote
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>
 
Upvote 0 Downvote
Solution
Top Bottom