The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Real-time Javascript

View previous topic View next topic Go down

Solved Real-time Javascript

Post by bmbmjmdm on 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?

bmbmjmdm
Forumember

Posts : 52
Reputation : 1
Language : English

Back to top Go down

Solved Re: Real-time Javascript

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Real-time Javascript

Post by bmbmjmdm on 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 :/

bmbmjmdm
Forumember

Posts : 52
Reputation : 1
Language : English

Back to top Go down

Solved Re: Real-time Javascript

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Real-time Javascript

Post by bmbmjmdm on 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?

bmbmjmdm
Forumember

Posts : 52
Reputation : 1
Language : English

Back to top Go down

Solved Re: Real-time Javascript

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Real-time Javascript

Post by bmbmjmdm on 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!

bmbmjmdm
Forumember

Posts : 52
Reputation : 1
Language : English

Back to top Go down

Solved Re: Real-time Javascript

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Real-time Javascript

Post by bmbmjmdm on 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

bmbmjmdm
Forumember

Posts : 52
Reputation : 1
Language : English

Back to top Go down

Solved Re: Real-time Javascript

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

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

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Real-time Javascript

Post by bmbmjmdm on 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

bmbmjmdm
Forumember

Posts : 52
Reputation : 1
Language : English

Back to top Go down

Solved Re: Real-time Javascript

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

Topic solved and archived


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


SLGray
Administrator
Administrator

Male Posts : 36673
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


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