Jump to content
Please Use CODE Tags

Why is this javascript if statement not working?

crispybagel
By crispybagel
in Programming
 Share
Go to solution Solved by MrVito,
On 8/9/2019 at 8:57 PM, Crispybagel said:

Trying to get it to work with a Pen but i can't figure it out :s...
https://codepen.io/niklas-bagge/pen/mNGYMg

Well the very first problem is that you are selecting your block by id div where it should be block and the second mistake is comparison in the if statement with = (it actually does an assignment) instead of == - which does the comparison of equality.

 

But the main reason that this code does not work is that it gets executed only once when you run the program (reload the page) and that's it. When you're changing (moving) the slider the code is not executed "again" to go through the if statement and so on. In other words moving the slider does not trigger the code to run again.
To execute some code on the event of slider being moved you need an event listener. Every element in the DOM fires events on various occasions, like when the button is clicked or the slider is moved, and we can "listen" to those events and execute code after they fire by attaching an event listener to the element that we're interested in. In this case it's the slider.

 

Here's an update of your JS code for that codepen example:

  

var slider = document.getElementById("slider");
var block = document.getElementById("block");

slider.addEventListener('change', onSliderValueChange);

function onSliderValueChange() {
  if (slider.value === "2") {
    block.style.background = "blue";
  }
}

I have attached an event listener to the slider element using the addEventListener method and passed two arguments into it:

'change' - name of the event that we want to listen on and a reference to a function onSliderValueChange that will be executed each time the value of the slider changes (hence that change event). Now when we move the slider the slider element will fire events, our event listener will handle those by executing the onSliderValueChange function and the code in that function will change the background of the block when the value is exactly '2'. Note the triple equal sign - this means that we're not only shallow comparing the value but also comparing the type of it... but that's a story for another day :) Good luck coding!

Posted

Trying to make text shift color whenever a <input type=range> value=2, no idea why it doesnt work?

  

HTML

<div class="picture_filters">
        <p class="filter_id" id="id1">Change Lighting</p>
        <input type="range" min="1" max="5" value="1" class="slider1"></input>
</div>

JAVA

var lighting = document.getElementsByClassName("slider1");
var text = document.getElementsByClassName("filter_id");
if (lighting.value = "2") {
  text.style.color = "red";
}

CSS (many styles and unrelated stuff)

.picture_filters {
  padding: 0 25px 0 0;
  height: 60px;
  width: auto;
  display: inline-block;
  line-height: 60px;
  background: #cbcbcb;
  color: #2a2a2a;
  position: relative;
  z-index: 100;
}
.filter_id {
  font-size: 30px;
  font-weight: bold;
  position: relative;
  top: -50%;
  float: left;
}
#id1 {
  float: left;
  margin-left: 25px;
}
input[type=range] {
  -webkit-appearance: none;
  position: relative;
  margin-top: 15px;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.25s;
}
.slider1 {float: left; width: 150px; margin-left: 25px;}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-ms-track {
  width: 60px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 30px;
  width: 30px;
  background: #2a2a2a;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 30px;
  width: 60px;
  cursor: pointer;
  background: #818181;
}

 

View my builds here!
https://pcpartpicker.com/user/Crispybagel/builds/

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

1 = means to assign.

2 = means to compare.

 

You are using 1 = in the if, but need to use 2 =.

  

// Compare the value and see if it is "2", so two =
if (lighting.value == "2") {
  // change the color, so assign "red", so one =
  text.style.color = "red";
}

 

"We're all in this together, might as well be friends" Tom, Toonami.

 

mini eLiXiVy: my open source 65% mechanical PCB, a build log, PCB anatomy and discussing open source licenses: https://linustechtips.com/topic/1366493-elixivy-a-65-mechanical-keyboard-build-log-pcb-anatomy-and-how-i-open-sourced-this-project/

 

mini_cardboard: a 4% keyboard build log and how keyboards work: https://linustechtips.com/topic/1328547-mini_cardboard-a-4-keyboard-build-log-and-how-keyboards-work/

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Maybe also try doing == "2" instead of just = "2" and see if that helps any

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
1 minute ago, Minibois said:

1 = means to assign.

2 = means to compare.

 

You are using 1 = in the if, but need to use 2 =.

  


// Compare the value and see if it is "2", so two =
if (lighting.value == "2") {
  // change the color, so assign "red", so one =
  text.style.color = "red";
}

 

Caught on to that last second, over looked it when I first did my comment

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
2 minutes ago, SafyreLyons-5LT said:

Did you put the code in <script></script> tags? Or like how did you implement it?

I've linked to an external file with script tags yes.

 

1 minute ago, Minibois said:

1 = means to assign.

2 = means to compare.

 

You are using 1 = in the if, but need to use 2 =.

  


// Compare the value and see if it is "2", so two =
if (lighting.value == "2") {
  // change the color, so assign "red", so one =
  text.style.color = "red";
}

 

I'm not exactly understanding what you are saying, will the == instead of = fix it?

View my builds here!
https://pcpartpicker.com/user/Crispybagel/builds/

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
1 minute ago, Crispybagel said:

I'm not exactly understanding what you are saying, will the == instead of = fix it?

In short, yes

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
Just now, Crispybagel said:

I've linked to an external file with script tags yes.

 

I'm not exactly understanding what you are saying, will the == instead of = fix it?

Yes.

But... The piece of code you posted, is that actually three files? Or one file? If it's one file, you need to have <script> tags and if it's three separate files, you need to link the stylesheet and javascript in the <head> of the HTML.

Also, use javascript 'alert' to see what is not working.

 

"We're all in this together, might as well be friends" Tom, Toonami.

 

mini eLiXiVy: my open source 65% mechanical PCB, a build log, PCB anatomy and discussing open source licenses: https://linustechtips.com/topic/1366493-elixivy-a-65-mechanical-keyboard-build-log-pcb-anatomy-and-how-i-open-sourced-this-project/

 

mini_cardboard: a 4% keyboard build log and how keyboards work: https://linustechtips.com/topic/1328547-mini_cardboard-a-4-keyboard-build-log-and-how-keyboards-work/

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
1 minute ago, Minibois said:

Yes.

But... The piece of code you posted, is that actually three files? Or one file? If it's one file, you need to have <script> tags and if it's three separate files, you need to link the stylesheet and javascript in the <head> of the HTML.

Also, use javascript 'alert' to see what is not working.

 

Yes it's an HTML file with external CSS and Java. How exactly do i use javascript alert?

View my builds here!
https://pcpartpicker.com/user/Crispybagel/builds/

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
4 minutes ago, Crispybagel said:

Yes it's an HTML file with external CSS and Java. How exactly do i use javascript alert?

Are you sure the Javascript is linked correctly?

https://www.w3schools.com/tags/att_script_src.asp

Same for CSS:

https://www.w3schools.com/css/css_howto.asp

 

And you just use Javascript alert like this: 

alert("This is an alert in my code to show myself the code reached somewhere");

It's just an easy way to debug, because maybe the code did reach the if, but just the thing in the if did not work..

Personally I would place an alert in the if and just in the Javascript code.

Of course in the if to see that being triggered and inside the javascript file because you want to know it is getting called upon properly.

"We're all in this together, might as well be friends" Tom, Toonami.

 

mini eLiXiVy: my open source 65% mechanical PCB, a build log, PCB anatomy and discussing open source licenses: https://linustechtips.com/topic/1366493-elixivy-a-65-mechanical-keyboard-build-log-pcb-anatomy-and-how-i-open-sourced-this-project/

 

mini_cardboard: a 4% keyboard build log and how keyboards work: https://linustechtips.com/topic/1328547-mini_cardboard-a-4-keyboard-build-log-and-how-keyboards-work/

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
7 minutes ago, Minibois said:

Are you sure the Javascript is linked correctly?

https://www.w3schools.com/tags/att_script_src.asp

Same for CSS:

https://www.w3schools.com/css/css_howto.asp

Yes the CSS and Java are linked correctly although i have no idea how to see if my java works because nothing has worked so far...the alert thing didnt seem to show up and i tried attatching it to an onclick  function test button.

View my builds here!
https://pcpartpicker.com/user/Crispybagel/builds/

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

document.getElementsByClassName returns an array of elements (actually technically I think it's a special object that quacks like an array, but that's besides the point). To get the value of your input, you either need to give it an ID, then use document.getElementById("...") (nb. this is element rather than elements), or index the return from getElementsByClassName: 

var lighting = document.getElementsByClassName("slider1")[0];

The first option is nicer, but they are equally functional if you only have one element that you care about.

HTTP/2 203

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Solution
On 8/9/2019 at 8:57 PM, Crispybagel said:

Trying to get it to work with a Pen but i can't figure it out :s...
https://codepen.io/niklas-bagge/pen/mNGYMg

Well the very first problem is that you are selecting your block by id div where it should be block and the second mistake is comparison in the if statement with = (it actually does an assignment) instead of == - which does the comparison of equality.

 

But the main reason that this code does not work is that it gets executed only once when you run the program (reload the page) and that's it. When you're changing (moving) the slider the code is not executed "again" to go through the if statement and so on. In other words moving the slider does not trigger the code to run again.
To execute some code on the event of slider being moved you need an event listener. Every element in the DOM fires events on various occasions, like when the button is clicked or the slider is moved, and we can "listen" to those events and execute code after they fire by attaching an event listener to the element that we're interested in. In this case it's the slider.

 

Here's an update of your JS code for that codepen example:

  

var slider = document.getElementById("slider");
var block = document.getElementById("block");

slider.addEventListener('change', onSliderValueChange);

function onSliderValueChange() {
  if (slider.value === "2") {
    block.style.background = "blue";
  }
}

I have attached an event listener to the slider element using the addEventListener method and passed two arguments into it:

'change' - name of the event that we want to listen on and a reference to a function onSliderValueChange that will be executed each time the value of the slider changes (hence that change event). Now when we move the slider the slider element will fire events, our event listener will handle those by executing the onSliderValueChange function and the code in that function will change the background of the block when the value is exactly '2'. Note the triple equal sign - this means that we're not only shallow comparing the value but also comparing the type of it... but that's a story for another day :) Good luck coding!

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
20 hours ago, MrVito said:

Well the very first problem is that you are selecting your block by id div where it should be block and the second mistake is comparison in the if statement with = (it actually does an assignment) instead of == - which does the comparison of equality.

 

But the main reason that this code does not work is that it gets executed only once when you run the program (reload the page) and that's it. When you're changing (moving) the slider the code is not executed "again" to go through the if statement and so on. In other words moving the slider does not trigger the code to run again.
To execute some code on the event of slider being moved you need an event listener. Every element in the DOM fires events on various occasions, like when the button is clicked or the slider is moved, and we can "listen" to those events and execute code after they fire by attaching an event listener to the element that we're interested in. In this case it's the slider.

 

Here's an update of your JS code for that codepen example:

  


var slider = document.getElementById("slider");
var block = document.getElementById("block");

slider.addEventListener('change', onSliderValueChange);

function onSliderValueChange() {
  if (slider.value === "2") {
    block.style.background = "blue";
  }
}

I have attached an event listener to the slider element using the addEventListener method and passed two arguments into it:

'change' - name of the event that we want to listen on and a reference to a function onSliderValueChange that will be executed each time the value of the slider changes (hence that change event). Now when we move the slider the slider element will fire events, our event listener will handle those by executing the onSliderValueChange function and the code in that function will change the background of the block when the value is exactly '2'. Note the triple equal sign - this means that we're not only shallow comparing the value but also comparing the type of it... but that's a story for another day :) Good luck coding!

Thanks, i got to read up on EventListeners! i added a else statement to change it back to red if the slider value returns to 1 and it works like a charm :)

View my builds here!
https://pcpartpicker.com/user/Crispybagel/builds/

 

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×