JavaScript不比较传递的参数值

Question

I have following html -

<input type="Radio" name="radio2text" value="Radiobutton1" 
onclick="javascript:radioWithText('one')" checked="checked" />OneRadio<br/>
<input type="Radio" name="radio2text" value="Radiobutton2" 
onclick="javascript:radioWithText('two')" unchecked />TwoRadio
<br/>
<input type="Radio" name="radio2text" value="Radiobutton2" 
onclick="javascript:radioWithText('three')" unchecked />ThreeRadio
<br/>
<input type="Radio" name="radio2text" value="Radiobutton2" 
onclick="javascript:radioWithText('four')" unchecked />FourRadio

and also this

<span id="one" name="one" width="5px" style="background-color:#fff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span id="two" name="one" width="5px" style="background-color:#fff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span id="three" name="one" width="5px" style="background-color:#fff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span id="four" name="one" width="5px" style="background-color:#fff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>

This produces a 4 small width square in white on my background color of green. Those four square are shown and i want to change their color off-course background to be red when particular radio button is selected. For that shake i pass a paramter with javascript javascript:radioWithText('one') . As you can see the function is passed a parameter ok! Next is to do javascript with the function i called.

function radioWithText(d) {
    alert(d);
    if (d.val=='one')
    {
        var one = document.getElementById('one');
        //one.checked = true;
        one.style.background="red";
    }
}

You can see probably when the radio button is checked it alert the value passed (the button which is selected). In alert it show "one" "two" "three" "four" while the same value that is when first radio button is placed passes "one" when compared it not comparing what may be the reason? help me out!
Desperately a silly mistake thanks in advance

Answer 1

First remove javascript: from the inline events:

<input type="Radio" name="radio2text" value="Radiobutton1" 
onclick="radioWithText('one')" checked="checked" />OneRadio<br/>
<input type="Radio" name="radio2text" value="Radiobutton2" 
onclick="radioWithText('two')" unchecked />TwoRadio
<br/>
<input type="Radio" name="radio2text" value="Radiobutton2" 
onclick="radioWithText('three')" unchecked />ThreeRadio
<br/>
<input type="Radio" name="radio2text" value="Radiobutton2" 
onclick="radioWithText('four')" unchecked />FourRadio

Secondly, you're passing a string to your function, so there is no .val property. Remove that:

function radioWithText(d) {
    alert(d);
    if (d == 'one')
    {
        var one = document.getElementById('one');
        //one.checked = true;
        one.style.background="red";
    }
}

Answer 2

Remove the .val . Your parameter is a string, there is no .val

function radioWithText(d) {
    alert(d);
    if (d == 'one')
    {
        var one = document.getElementById('one');
        //one.checked = true;
        one.style.background="red";
    }
}

Answer 3

The variable d holds the value you need to compare. It does not have a property named val .

The comparison line should be:

if (d === 'one')

Answer 4

No Val needed.

function radioWithText(d) {
    alert(d);
    if (d == 'one')
    {
        var one = document.getElementById('one');
        //one.checked = true;
        one.style.background="red";
    }
}

Answer 5

You don't need the d.val

The d variable is equal to 'one' .

function radioWithText(d) {
alert(d);
if (d=='one')
{
    var one = document.getElementById('one');
    //one.checked = true;
    one.style.background="red";
    }
}

Also, no need for the javascript: in your onclick events. onclick maps directly to javascript, unlike a elements.

Fiddle here.