Jump to content

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


Recommended Posts

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!

Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...