It appears that the JS function is not being triggered

Question

It appears that the JS function is not being triggered

I am facing an issue with my JavaScript code where a ball is not showing up even though it should. I have an array with only one element, and when that element matches with "F2", the ball is supposed to appear. I suspect there might be a problem with my use of both JS and jQuery together, as I am unsure if this combination is causing the issue. To debug the code, I usually rely on using `alert()` statements to identify where the problem lies. However, without an IDE for JS, I am not sure if this is the most effective way to troubleshoot.

$(document).ready(function() {
  var notes = ["F2"];
  if($("#" + notes.pop()).innerHTML == "F2") {
    $("#F2").addClass("shown")
  } else {
    $("#F2").removeClass("shown");
  }
});

#F2 {
  width: 10px;
  height: 10px;
  background: #ccc;
  border: 2px solid #ccc;
  border-radius: 50%;
}

.not_shown {
  display: none;
}

.shown {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="ball">
  <div id="F2" class="not_shown"></div>
</div>

javascript jquery html css

Answer 1

Answer №1

It is unnecessary to insert any content into the div or compare its contents. Simply select by ID and compare IDs directly.

$(document).ready(function() {
    var notes = ['F2'],
      $el;

    // Optimize by selecting element once with jQuery
    $el = $('#' + notes.pop());

    // Prefer strict comparison unless there is a valid reason not to (which is rare)
    if($el.get(0).id === 'F2') { // Compare only the ID without checking the content
        $el.addClass('shown');
    } else {
        $el.removeClass('shown');
    }
});

For debugging purposes, utilize browser DevTools to debug step by step through the code. This method allows you to inspect values at specific points of execution for easier debugging.

Edit: Access the working code on JSFiddle

Answer 2

It is unnecessary to insert any content into the div or compare its contents. Simply select by ID and compare IDs directly.

$(document).ready(function() {
    var notes = ['F2'],
      $el;

    // Optimize by selecting element once with jQuery
    $el = $('#' + notes.pop());

    // Prefer strict comparison unless there is a valid reason not to (which is rare)
    if($el.get(0).id === 'F2') { // Compare only the ID without checking the content
        $el.addClass('shown');
    } else {
        $el.removeClass('shown');
    }
});

For debugging purposes, utilize browser DevTools to debug step by step through the code. This method allows you to inspect values at specific points of execution for easier debugging.

Edit: Access the working code on JSFiddle

Answer 3

Answer №2

Based on your inquiry, it seems you are looking to extract an element from an array and compare it with "F2". If there is a match, you want to modify the class of a particular div.

Here is the revised JavaScript code to accomplish this task:

$(document).ready(function() {
  var notes = ["F2"];
  if(notes.pop() === 'F2') {
    $('#F2').addClass('shown')
  } else {
    $('#F2').removeClass('shown');
  }
});

You can view a live demonstration at http://jsbin.com/nomavedamo/edit?html,css,js,output

Answer 4

Based on your inquiry, it seems you are looking to extract an element from an array and compare it with "F2". If there is a match, you want to modify the class of a particular div.

Here is the revised JavaScript code to accomplish this task:

$(document).ready(function() {
  var notes = ["F2"];
  if(notes.pop() === 'F2') {
    $('#F2').addClass('shown')
  } else {
    $('#F2').removeClass('shown');
  }
});

You can view a live demonstration at http://jsbin.com/nomavedamo/edit?html,css,js,output

Answer 5

Answer №3

There are a couple of issues with the code that I have noticed.

Firstly, the line $('#' + notes.pop()).innerHTML is incorrect and should be changed to $('#' + notes.pop()).html().

Secondly, there is no text 'F2' within the div, so the comparison

($('#' + notes.pop()).html() == 'F2')

will always fail.

I made some slight modifications to address these issues.

#F2 {
  width: 10px;
  height: 10px;
  background: #ccc;
  border: 2px solid #ccc;
  border-radius: 50%;
}
.not_shown {
  display: none;
}
.shown {
  display: block;
}

<!DOCTYPE html>
<html>

<head>
  <link type="text/css" rel="stylesheet" href="code.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script type="text/javascript" src="code_js.js"></script>
</head>

<body>
  <div id="ball">
    <div id="F2" class="not_shown">F2</div>
  </div>
</body>

</html>
<script>
  $(document).ready(function() {
    var notes = ["F2"];
    debugger;
    if ($('#' + notes.pop()).html() == 'F2') {
      $('#F2').addClass('shown')
    } else {
      $('#F2').removeClass('shown');
    }

  });
</script>

Answer 6

There are a couple of issues with the code that I have noticed.

Firstly, the line $('#' + notes.pop()).innerHTML is incorrect and should be changed to $('#' + notes.pop()).html().

Secondly, there is no text 'F2' within the div, so the comparison

($('#' + notes.pop()).html() == 'F2')

will always fail.

I made some slight modifications to address these issues.

#F2 {
  width: 10px;
  height: 10px;
  background: #ccc;
  border: 2px solid #ccc;
  border-radius: 50%;
}
.not_shown {
  display: none;
}
.shown {
  display: block;
}

<!DOCTYPE html>
<html>

<head>
  <link type="text/css" rel="stylesheet" href="code.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script type="text/javascript" src="code_js.js"></script>
</head>

<body>
  <div id="ball">
    <div id="F2" class="not_shown">F2</div>
  </div>
</body>

</html>
<script>
  $(document).ready(function() {
    var notes = ["F2"];
    debugger;
    if ($('#' + notes.pop()).html() == 'F2') {
      $('#F2').addClass('shown')
    } else {
      $('#F2').removeClass('shown');
    }

  });
</script>

Answer 7

Answer №4

$(document).ready(function() {
    var notes = ["A4"];
    if($('#' + notes.pop()).innerHTML == 'A4') {
        $('#A4').addClass('highlighted')
    } else {
        $('#A4').removeClass('highlighted');
    }

});

Perhaps you forgot to include the # in the selector?

Answer 8

$(document).ready(function() {
    var notes = ["A4"];
    if($('#' + notes.pop()).innerHTML == 'A4') {
        $('#A4').addClass('highlighted')
    } else {
        $('#A4').removeClass('highlighted');
    }

});

Perhaps you forgot to include the # in the selector?

Answer 9

Answer №5

There seems to be a misunderstanding regarding the usage of 'innerHTML'. Here is an alternative approach you can try:

$(document).ready(function() {
    var notes = ["F2"];
    if($('#' + notes.pop()).length) {
        $('#F2').addClass('shown')
    } else {
        $('#F2').removeClass('shown');
    }
});

Additionally, it is recommended to use tools like Chrome DevTools for debugging JavaScript code, which allows setting breakpoints and more. :）

Answer 10

There seems to be a misunderstanding regarding the usage of 'innerHTML'. Here is an alternative approach you can try:

$(document).ready(function() {
    var notes = ["F2"];
    if($('#' + notes.pop()).length) {
        $('#F2').addClass('shown')
    } else {
        $('#F2').removeClass('shown');
    }
});

Additionally, it is recommended to use tools like Chrome DevTools for debugging JavaScript code, which allows setting breakpoints and more. :）

It appears that the JS function is not being triggered

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Get a document from a NodeJS Server with the help of Express

Circular arrangement using D3 Circle Pack Layout in a horizontal orientation

Issue with jQuery .on('change') function not functioning correctly following a row being duplicated

Calculator screen filled with numbers overflowing beyond its boundaries

Vue unable to load material icons

The class "slick" in <col class="slick"> does not add any styling or effects

Guide to building an interactive slider with PHP, MySQL, and jQuery

Converting a JSON file into an HTML table using PHP

Ways to have a list component smoothly descend when a dropdown menu is activated

Using the request.getParameter method for casting in Java

Receiving a 405 Method Not Allowed error when accessing a WCF REST service using jQuery

Traverse through an array of pictures and add the data to a Bootstrap placeholder within HTML markup

Evaluate the user's answers to a database using a SQLite 3 C++ Quiz

Angular Checkbox Single Select

AJAX request fails to invoke upload.php script

Challenges encountered while making CSS adjustments on the Wordpress Twentyfourteen theme

Automatically trigger the Submit button click with this selector

Unable to successfully download npm packages - encountered an error running `[email protected] install: `node-pre-gyp install --fallback-to-build` on Ubuntu 18.04 system

What is the best way to access a local variable within a POST method in Node.js?

Incorporating dual CSS stylesheets into a single HTML document