Why doesn't my script change the text within my HTML? - 【StackMirror】|javascript|forms|html|radio-button

I have the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
body {background-color:Gray;}
body {text-align:left;}
</style>

    <title>My First Project</title>
</head>
<body>
<form>
<table border="1" align="center">
<u><h5>Size</h5></u>
<tr><td><input type="radio" name="size" id="small" />Small</td></tr>
<tr><td><input type="radio" name="size" id="medium" />Medium</td></tr>
<tr><td><input type="radio" name="size" id="large" />Large</td></tr>
</table>
<br />


<script type="text/javascript">
    if (document.getElementById('small').checked) {
        document.getElementById('total').innerHTML = '$1.00';
    }
    else {
    }
</script>
<div id="total">$0.00</div>
</form>
</body>
</html>

I wanted the script to change the text within div total to $1.00 instead of $0.00 when the radiobutton with id small was checked. However, nothing happens when I select it. What am I missing?

2012-04-04 20:53
by Wilson

The script needs to be placed below the total div. It is being run before that part of the DOM has loaded, therefore it can't find 'total - James Hay 2012-04-04 20:55

Your script is bring run when the page loads and prior to any user interaction. You need to tie events, like clicking the radio button, to your code - j08691 2012-04-04 20:56

But then, the script will not run when the radio button has changed. You'll need to add an event for that - Khôi 2012-04-04 20:58

You've to invoke a function on some event -- JS basically runs on events!!

<input type="radio" name="size" id="small" onclick="yourFxn()" />Small</td>

In your script

function yourFxn(){
if (document.getElementById('small').checked) {
    document.getElementById('total').innerHTML = '$1.00';
 }
 else {
 }
}

2012-04-04 20:57
by Vivek Chandra

scripts are read sequentially. When your javascript runs, there is no element with id total on the page because it is below the script.

But even if you move the code below, it still won't work because there is no click event atached to the radiobutton. your script only checks if the radiobutton is somehow magically selected on page load and changes the text. for exemple this code will change the text but it requires you to hardcode the checked radiobutton:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
body {background-color:Gray;}
body {text-align:left;}
</style>

    <title>My First Project</title>
</head>
<body>
<form>
<table border="1" align="center">
<u><h5>Size</h5></u>
<tr><td><input type="radio" name="size" id="small" checked="checked" />Small</td></tr>
<tr><td><input type="radio" name="size" id="medium" />Medium</td></tr>
<tr><td><input type="radio" name="size" id="large" />Large</td></tr>
</table>
<br />

<div id="total">$0.00</div>

<script type="text/javascript">
    if (document.getElementById('small').checked) {
        document.getElementById('total').innerHTML = '$1.00';
    }
    else {
    }
</script>


</form>
</body>
</html>

What I think you really want to do is to attach a "click" EVENT to the radiobutton.

You can read more here:

http://www.w3schools.com/jsref/event_onclick.asp

2012-04-04 21:15
by Liviuge

Here is a working example based on the critical parts of your code: http://jsfiddle.net/9hxDq/

You need to execute your code in response to an event (such as a click, a load event, or in response to an input being clicked)
Some of your markup was invalid (U tag inside of a TABLE)

HTML

<table border="1" align="center">
    <tr><td><input type="radio" name="size" id="small" />Small</td></tr>
    <tr><td><input type="radio" name="size" id="medium" />Medium</td></tr>
    <tr><td><input type="radio" name="size" id="large" />Large</td></tr>
</table>

<input type="button" value="Calculate" onclick="calculate()" />

<div id="total">$0.00</div>

JavaScript

function calculate()
{
    if (document.getElementById('small').checked) 
    {
        document.getElementById('total').innerHTML = '$1.00';
    }
    else 
    {
        alert("not checked!");
    }
}

2012-04-04 20:59
by Tim Medora

Tie the click event on the radio button to your code via:

var small = document.getElementById('small');
if (small.addEventListener) {
    small.addEventListener('click', calc, false);
} else if (small.attachEvent) {
    small.attachEvent('onclick', calc);
}
function calc() {
    if (document.getElementById('small').checked) document.getElementById('total').innerHTML = '$1.00';
};

jsFiddle example.

2012-04-04 21:01
by j08691

The reason why you are not getting $1.00 is that - code inside will execute on page load. but what you need is to set the div's value on some event of a radio and NOT ON page load event.

so use your code in some function and call that function on radio button's click event

2012-04-04 21:01
by Heer Makwana

The reason it isn't updating is because the script appears in the code before the <div id='total'>. And, more importantly, because the script gets executed immediately when it appears in the page, so it is run before the total element is added to the DOM.

To fix this, you need to either move the script lower in your HTML code, or make the script run only after the page has finished loading. The first of those options is a quick fix to get you up and running; the latter is probably the more recommended option.

To get it to run only after the page has finished loading, wrap it into a function, and use the onload event on the page to trigger it. Alternatively, if you're using JQuery, add it as a $(document).ready() function.

2012-04-04 21:26
by Spudley