Real-time Javascript

Hi, I would like a javascript script to be able to retrieve/update values given a user's input. Below is the example I'm currently running. In the post I have:

Code:

<form>
<input type="range" value="23" min="0" max="1000">
<input type="submit" value="Submit">
<span id="TES"></span>
</form>

And in the script I have:

Code:

$(function(){
if(document.getElementById('TES') != null){

   var num = document.querySelector('input[type=range]').value;


   document.getElementById('TES').innerHTML = ""+num+"";
}
});

Now when I view the post the javascript does in fact run! It displays the slider, the submit button, and the number "23". This is all expected. However when I try sliding the slider, the number does not change. I put the submit button in to see if pressing that helps, and it does not. I believe this is because the javascript only runs when the page is loaded, not modified. Is there any way to do what I'm trying?

Hello,

You should utilize some events such as onchange, or onmousemove. Adding an ID to your input field will make it easier.

For example :

HTML

Code:

<form>
<input id="theSlider" type="range" value="23" min="0" max="1000">
<input type="submit" value="Submit">
<span id="TES"></span>
</form>

JavaScript

Code:

$(function() {
  if (!document.getElementById('TES')) return;
  var a = document.getElementById('TES'), b = document.getElementById('theSlider');
  
  update();
  b.onchange = function() { update() }
  b.onmousemove = function() { update() }
  function update() { a.innerHTML = b.value }
});

Whenever the user moves their mouse the value is updated. onchange will update the data once the user lets go of the slider.

Thanks for the reply Ange,

I didn't know about events, they seem quite useful! However I copy and pasted your code directly into a post and a javascript in order to test it out, but nothing seems to appear for TES. The slider is there, as well as the submit button, but nothing for TES. I tried sliding the slider and it still didn't show. I read your code and think I understand what it's supposed to be doing, and everything seems logical, so I'm sure it must be a syntax/grammatical error of some kind

The ACP script is picky, probably because it's automatically compressed. I needed to add a semi-colon after the event functions. I tested this in an HTML page when I should of did it in JS management.

Code:

$(function() {
  if (!document.getElementById('TES')) return;
  var a = document.getElementById('TES'), b = document.getElementById('theSlider');
  
  update();
  b.onchange = function() { update() };
  b.onmousemove = function() { update() };
  function update() { a.innerHTML = b.value }
});

Aha! Thank you, it works great ^^. I do have one question though; it seems that "update()" automatically runs when the page is loaded, even though neither of the events have occurred. While this is desirable in the case above, I had the idea of having buttons here too to do things when clicked. Unfortunately though all of their functions run when the page is loaded, despite never having been clicked. Is there a way to get around this?

update() is automatically invoked as I've written update(); outside of an event. If we remove that, the value of TES will remain blank until an event occurs. ( Unless you write the default value in the HTML )

You can use the onclick event to execute a function when an element is clicked. For example :

HTML

Code:

<div id="theTarget">Not clicked</div>

JavaScript

Code:

$(function() {
  var a = document.getElementById('theTarget');
  a.onclick = function() { a.innerHTML = 'Clicked' }
});

Ah, I feel stupid now because when I read that line I had thought you were making a function prototype xD. There's just one problem though, I took out that line (update;) and it still runs automatically at startup!

I believe that would be from the mousemove event. If you move your mouse over b(theSlider) it'll update the value.

You could probably try oninput, and see if that works better :

Code:

$(function() {
  if (!document.getElementById('TES')) return;
  var a = document.getElementById('TES'), b = document.getElementById('theSlider');
  
  b.onchange = function() { update() };
  b.oninput = function() { update() };
  function update() { a.innerHTML = b.value }
});

Hm I don't think that's the problem, as I created a separate button element with an onclick event and its function gets called at startup ><. Basically just added this:

Code:

c = document.getElementById('but');
c.onclick =  function() { setTo() };
function setTo() {b.value = 501; update();}

I made sure setTo isn't called anywhere else in the script, but when the page is loaded the slider still starts at the value 501

Is update being invoked anywhere else ? The snippet you have would only run on click

Revised! It turns out I was leaving out the default value for the slider in the html. Not sure why it decided to default to 501, but that's irrelevant I guess haha. On that note, this solves all the event questions I have. Thanks again Ange!