The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Real-time Javascript

3 posters

Go down

Solved Real-time Javascript

Post by bmbmjmdm September 22nd 2014, 6:13 pm

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?
avatar
bmbmjmdm
Forumember

Posts : 52
Reputation : 1
Language : English

Back to top Go down

Solved Re: Real-time Javascript

Post by Ange Tuteur September 22nd 2014, 9:44 pm

Hello,

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

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.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Real-time Javascript

Post by bmbmjmdm September 23rd 2014, 12:34 am

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 :/
avatar
bmbmjmdm
Forumember

Posts : 52
Reputation : 1
Language : English

Back to top Go down

Solved Re: Real-time Javascript

Post by Ange Tuteur September 23rd 2014, 1:32 am

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. tongue
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 }
});
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Real-time Javascript

Post by bmbmjmdm September 23rd 2014, 4:23 am

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?
avatar
bmbmjmdm
Forumember

Posts : 52
Reputation : 1
Language : English

Back to top Go down

Solved Re: Real-time Javascript

Post by Ange Tuteur September 23rd 2014, 4:53 am

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' }
});
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Real-time Javascript

Post by bmbmjmdm September 23rd 2014, 5:06 am

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!
avatar
bmbmjmdm
Forumember

Posts : 52
Reputation : 1
Language : English

Back to top Go down

Solved Re: Real-time Javascript

Post by Ange Tuteur September 23rd 2014, 6:38 am

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 }
});
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Real-time Javascript

Post by bmbmjmdm September 23rd 2014, 3:20 pm

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
avatar
bmbmjmdm
Forumember

Posts : 52
Reputation : 1
Language : English

Back to top Go down

Solved Re: Real-time Javascript

Post by Ange Tuteur September 23rd 2014, 5:24 pm

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

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Real-time Javascript

Post by bmbmjmdm September 23rd 2014, 7:26 pm

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! Very Happy
avatar
bmbmjmdm
Forumember

Posts : 52
Reputation : 1
Language : English

Back to top Go down

Solved Re: Real-time Javascript

Post by SLGray September 23rd 2014, 7:42 pm

Topic solved and archived


Real-time Javascript Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51464
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum