Question

I’m trying to update the text label on an input field based on the selection in a dropdown list.

The field label below by default reads “Mean.” I’d like it to be replaced by “Lower bound” if option 2 is selected.

<simpleLabel for="distLabel">Prior distribution, <i>CFR</i>:</label>
<select id="priorCFRDistType" onchange='changePriorDistType();'>
<option value="1">beta</option>
<option value="2">uniform</option>
</select>
<p>
<simpleLabel for="cfr_1">Mean:</label>
<input id="cfr_1" type="text" value ="0.05" />

In my .js file, I have changePriorDistType(). It currently does a lot of stuff under the hood. How do I get it to update the text field? This is what I’ve tried so far:

function changePriorDistType() {
    menuItem = document.getElementById("priorCFRDistType");
    priorCFRDistType = menuItem.options[menuItem.selectedIndex].value;
    if ( priorCFRDistType == 2 ) {
       var tmpThing = document.getElementById("cfr_1").innerText;
       tmpThing = "Lower bound";
    }
}

This doesn’t work. I’m clearly new to Javascript and HTML, so nothing’s too obvious to point out. Thanks.

Answer 1

first mistake (beside that mismatching tags) is that with getElementById("cfr_1") you get the element with the id cfr_1 which is the input element not the label.

second error is that, with tmpThing = "Lower bound" you won’t change the innerText of the element. you need to do e.g. document.getElementById('cfr_1_label').innerText = "Lower bound" (but that would require you to add the id cfr_1_label to the label tag)