CODEWITHSUNDEEP
javascriptjqueryhtmlcss
vkosyj
vkosyj

Reputation: 767

JS function seems like does not get called

I have a array with only one element (eventually I will expand the array for sure). At the very beginning, the element in the array is popped out, then the program finds that the element matches with "F2", then a ball shows up. However, the ball does not shows up. I am concerned about my js code since I sort of use JS and jQuery together. Even though I can consider jQuery as the library of the JS, I am not sure if it is the issue here. The way that I debug JS code is to throw a bunch of alert() and try to find to which line alert() does not get called so I know there is a problem, but once again, I am not sure if it is the best to do it since there is no IDE in JS.

$(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>

Upvotes: 2

Views: 103

Answers (5)

godfrzero
godfrzero

Reputation: 2270

There's no need to add content to the div, or to compare with the div contents. Since you're selecting by the ID, go ahead and compare the ID.

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

    // When selecting an element with jQuery, do it just once and
    // then reference it as much as you want
    $el = $('#' + notes.pop());

    // Use strict comparison unless you have an excellent reason not to (rare)
    if($el.get(0).id === 'F2') { // Just compare the ID, not sure why we need to even look at the content here
        $el.addClass('shown');
    } else {
        $el.removeClass('shown');
    }
});

As for debugging, you should be using the browser DevTools to step through the code. This way you can inspect values at specific points of execution, makes for easier debugging.

Edit: Fiddle with working code

Upvotes: 2

Jithu Rajan
Jithu Rajan

Reputation: 452

I see few issues in the code.

First $('#' + notes.pop()).innerHTML is not correct. it should be $('#' + notes.pop()).html().

Second there is no text F2 in the div. So ($('#' + notes.pop()).html() == 'F2') will fail always.

I modified it slightly. 

#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>

Upvotes: 2

tomasran
tomasran

Reputation: 31

You misunderstanded the useage of 'innerHTML'.So you can try this.

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

});

By the way, it's better to use something just like chrome dev tools to debug js, such as setting break point and so on. :）

Upvotes: 1

Dinesh K
Dinesh K

Reputation: 361

From your question i understood that you want to pop the array element and compare it with "F2". If it matches then you want to change the div class.

Below is the corrected javascript code to achieve this.

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

You can find the working example at http://jsbin.com/nomavedamo/edit?html,css,js,output

Upvotes: 2

Bill
Bill

Reputation: 19248

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

});

i think u miss the # in the selector

Upvotes: 1

Related Questions