InnerHTML remains the same regardless of conditional statement in Javascript

Question

I am using an HTML span tag to display some text if a certain radio option is chosen. If I click on the 2nd radio option, the span tag text should be overridden and turned into an empty string. The text currently does not disappear.

I have tried the style.display = "none" and I have also tried overriding the innerHTML with an empty string.

Javascript



        if(timeCard[1].value == "N/A"){

            document.getElementById("radioError").innerHTML = "Please verify this field before submitting.";
            console.log('Hi');
        }else{
            document.getElementById("radioError").innerHTML = "";
        }

    }

HTML

<input type="radio" name="timecard" value="Yes">Yes<br>
<input type="radio" name="timecard" value="N/A">N/A<br>
<span id="radioError" style="font-size: 0.9em; color:red;"></span>

I want the span text to be overridden by the 2nd innerHTML in the javascript.

There is a lot you are not showing. How are you getting and testing the current radio option that has been selected? What does objPayCode and timeCard have to do with this? — Booboo
– Booboo, Commented Jun 25, 2019 at 21:40
your problem should how you check the radio box value. Please edit you question with the code about radio buttonl — Wolfetto
– Wolfetto, Commented Jun 25, 2019 at 21:45

Obsidian Age · Accepted Answer · 2019-06-25 21:38:38Z

1

Assuming timeCard is an array, instead of timeCard[1].value, you're just looking to check that timeCard[1] is equal to N/A.

timeCard = ["one", "N/A"];

if (timeCard[1] == "N/A") {
  document.getElementById("radioError").innerHTML = "Please verify this field before submitting.";
} else {
  document.getElementById("radioError").innerHTML = "Please mitting.";
}

<span id="radioError" style="font-size: 0.9em; color:red;"></span>

answered Jun 25, 2019 at 21:38

Obsidian Age

42.6k11 gold badges54 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TRS7 Over a year ago

Hi, I tried this code but the Please Verify... font stays on the screen even when I click the other radio button.

John · Accepted Answer · 2019-06-25 22:33:10Z

0

Without complete code, at a guess, you should be using .checked property to see if it is selected instead of value given that value for timeCard[1] will always be "N/A".

if (timeCard[1].checked) {
   document.getElementById("radioError").innerHTML = "Please verify this field before submitting.";
    }else{
        document.getElementById("radioError").innerHTML = "";
    }

answered Jun 25, 2019 at 22:33

John

3,8052 gold badges21 silver badges24 bronze badges

1 Comment

Booboo Over a year ago

This is the correct way to check which radio button is checked.

Collectives™ on Stack Overflow

InnerHTML remains the same regardless of conditional statement in Javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related