slider Problem with creating a dynamic range slider to change the font size, with JavaScript.

[diegomassaro 0]

Hello, I attached the code that I used for the slider. I'm using p5.js.

It doesn't work if I insert separately the JS code in the sketch.js page.

HTML:

  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">

  <p id="demo">Value: </p>

Javascript:

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");

slider.oninput = function() {
  output.style.fontSize = slider.value + "px";
}

 

Thank you all!

[Ingolme 1,032]

If the <script> tag is before the elements in your document then it won't have access to the elements because they haven't been parsed by the browser yet.

I recommend putting <script> tags at the bottom of the page, right before the closing </body> tag.