Newcomer: Simple button + Alert box

[LionFische]

Hi all, I'm new to the forum and Javascript. I have a simple project I want to complete. I have an input box, and a button. When I click the button I want to take text from the input box and display it in an alert window.

As it stands, data is being pulled from the 'sCounters' input box and is displayed in the alert window. However, if I change the data in the window while the page is loaded and active, then press the button, the data in the alert window does not change to reflect the current data in the input box???

So, that's my problem. As I say, I'm new to this and I'm sure it's quite basic. I'd be delighted with some help.

Regards,
LF

My Html...

<fieldset>
<legend>Details</legend>

<label for "name">Name</label>
<input id="name">

<label for "wCounters">Weiße Zähler</label>
<input id="wCounters" type="number" value='1' min="0" max="10">

<input type="button" id="test" value="Test">
</fieldset>

js file...

$(document).ready(function() {

var x=document.getElementById("wCounters").value;

$('#test').click(function(){
window.alert(x);
});

});

[xelawho]

you are getting the value of x after the page has loaded but before the click has happened. try this:

$(document).ready(function() {

$('#test').click(function(){
var x=document.getElementById("wCounters").value;	
window.alert(x);
});

});

[Old Pedant]

The code you are showing there would require one of the JavaScript libraries--most likely jQuery--in order to run. Is there some reason you want to pull in the entire jQuery library for something as simple as this?

Also, are you aware that alert( ) is considered (a) very obsolete and (b) bad practice except maybe when debugging code. Some browsers now allow the user to turn off alerts. And you can expect that in the near future that will be true with *all* browsers. What good is an alert( ) if the use has disabled it?

[LionFische]

Thank you very much for the replies.

The solution worked properly.

Regarding use of the alert box, it's just a temporary measure. I wanted to learn how to pull data from an input box, place it in a variable and then have it available to perform operations upon. Using an alert box was purely for test purpose to see that I was successfully collecting data.

As for using JQuery, I'd be happy to see an example without it's use. I have been looking at JQuery aswell as Javascript itself. If there are better methods, I'd be delighted to see.

Thanks again for prompt replies.

LF

[Philip M]

Using jQuery is like using a sledghammer to crack a nut. There is a massive overhead. You should look at jQuery after you have become proficient at Javascript, not before.

<input type= "text" id ="mytext" size = "2" maxlength = "2" value = 1>
<input type = "button" id = "mybutton" value = "Alert the Textbox Value" onclick = "showValue()">

<script type = "text/javascript">

function showValue() {
var val = Math.floor(document.getElementById("mytext").value);   // make an integer number
if (val <=10 && val >=0) {
alert (val);  // use alert() only for testing purposes
}
else {
alert ("Invalid value entered - must be 0-10");
}
}

</script>

BTW, you should avoid giving names or id's to your variables/functions/arguments/forms words which are HTML/JavaScript methods/properties/attributes such as 'name' or 'id' or 'value' or 'test' or 'text' or 'checked' or 'click' or 'href' or 'closed' or 'go' or 'submit' or 'replace' or 'button' or 'radio' or 'parseInt'.
And of course you may not give a variable a name which is a Javascript keyword or event such as alert, case, char, confirm, false, int, null, onload, return, this, void, window, and so on.


A couple of errors cost us two goals and that was all that was good about the game. - Football team coach

[LionFische]

Thank you very much Philip, excellent and useful advice on Javascript and naming conventions. I agree, I can see Javascript fulfilling my requirements just fine. I'll pursue this path.

Thanks all for the prompt help.

Regards,
LF.

[LionFische]

Hi, Philip a quick question.

I'm wondering, is it considered good practice to include the onclick function call in your HTML?

<input type = "button" id = "mybutton" value = "Alert the Textbox Value" onclick = "showValue()">

As it is, I'm laying out structure on HTML, styling through CSS and was wondering about separating all Javascript code. Not sure if a call to a function is an issue though to be honest, just something that came to mind.

I'm new to this, so am wondering if this is the conventional and recommended approach.

Thanks,
LF

[xelawho]

conventional: yes
recommended: not really

the problem that you may run into later is that if you add another onclick to that button in the javascript it will override the first. and if you add another it will override the second.

It's not something to lose too much sleep over at this point, but some people advocate learning to do it right from the beginning to avoid developing bad habits.

To simply separate the javascript from the html you would do:

<input type= "text" id ="mytext" size = "2" maxlength = "2" value = 1>
<input type = "button" id = "mybutton" value = "Alert the Textbox Value">

<script type = "text/javascript">
document.getElementById("mybutton").onclick=showValue;

function showValue() {
var val = Math.floor(document.getElementById("mytext").value);   // make an integer number
if (val <=10 && val >=0) {
alert (val);  // use alert() only for testing purposes
}
else {
alert ("Invalid value entered - must be 0-10");
}
}
</script>

to make the javascript unobtrusive (ie, allow various click listeners on the same button not to conflict with each other) you would do something like

<input type= "text" id ="mytext" size = "2" maxlength = "2" value = 1>
<input type = "button" id = "mybutton" value = "Alert the Textbox Value">

<script type = "text/javascript">
if (window.addEventListener)
addEvent = function(ob, type, fn ) {
ob.addEventListener(type, fn, false );
};
else if (document.attachEvent)
addEvent = function(ob, type, fn ) {
var eProp = type + fn;
ob['e'+eProp] = fn;
ob[eProp] = function(){ob['e'+eProp]( window.event );};
ob.attachEvent( 'on'+type, ob[eProp]);
};
 
addEvent(document.getElementById('mybutton'),'click',showValue);
addEvent(document.getElementById('mybutton'),'click',secondFunc);

function showValue() {
var val = Math.floor(document.getElementById("mytext").value);   // make an integer number
if (val <=10 && val >=0) {
alert (val);  // use alert() only for testing purposes
}
else {
alert ("Invalid value entered - must be 0-10");
}
}

function secondFunc(){
alert("another function")
}
</script>

felgall explains it more in depth here

[LionFische]

Great Xelawho, thanks for the in depth answer.

I want to get the simple stuff straight to begin with and then build.

Regards,
LF