Changing a a html element with a if/else if statement based on a selected option

Question

I want to change the lable tags and the placeholder of the input for the for the form with an id of "PercentageCalc". I want it to change based off of the selected option for the dropdown menu. I tried different ways of writing the function and tried giving it .addEventListener. Cant seem to figure it out.

let numField1 = document.getElementById('numField1');
let numField2 = document.getElementById('numField2');
let resultField = document.getElementById('resultField');
let form = document.getElementById('PercentageCalc');
let preInputText = document.getElementById('preInputText');
let numField1Text = document.getElementById('numField1Text');
let numField2Text = document.getElementById('numField2Text');
let CalcTypeSelector = document.getElementById('CalcTypeSelector');

CalcTypeSelector.addEventListener('change', function () {
    if (CalcTypeSelector.value = 'whatisXPofY') {
    preInputText.innerText = "What is";
    numField1Text.innerText = "% of";
    numField1.placeholder = "X";
    numField2Text.innerText = "?";
    numField2.placeholder = "Y";
} else if (CalcTypeSelector.value = 'XisYPofWhat') {
    numField1Text.innerText = "is";
    numField1.placeholder = "X";
    numField2Text.innerText = "% of what?";
    numField2.placeholder = "Y";
} else if (CalcTypeSelector.value = 'whatPofXisY') {
    preInputText.innerText = "What % of";
    numField1Text.innerText = "is";
    numField1.placeholder = "X";
    numField2Text.innerText = "?";
    numField2.placeholder = "Y";
}
});

form.addEventListener('submit', function (e) {

if (!numField1.value || !numField2.value ) {
    alert("Please enter number values in the fields")
} else {
    let x = parseFloat(numField1.value);
    let y = parseFloat(numField2.value);

    let result = x / y;
    let percent = result * 100;

    resultField.innerText = "Result: " + percent + "%";
    e.preventDefault();

}
});

<body>
<h1>Percentage Calculators</h1>
<form id="CalcType">
    <select id="CalcTypeSelector">
        <option>Choose and option</option>
        <option value="whatisXPofY">what is X percentage of Y?</option>
        <option value="XisYPofWhat">X is Y percentage of what?</option>
        <option value="whatPofXisY">what percentage of X is Y?</option>
        <option value="XPofWhatisY">X percentage of what is Y?</option>
        <option value="YPofXisWhat">Y percentage of X is what?</option>
    </select>
</form>
<div>
    <p>X is what percent of Y?</p>
    <form id="PercentageCalc">
        <label id="preInputText">gfg</label>
        <input type="text" id="numField1" />
        <label id="numField1Text">gfdg</label>
        <input type="text" id="numField2" />
        <label id="numField2Text">rter</label>
        <br />
        <br />
        <input type="submit" value="Calculate">
    </form>
</div>
<h3 id="resultField"></h3>
<script type="text/javascript" src="calc.js"></script>

mostafa tourad · Accepted Answer · 2017-12-26 18:24:16Z

The problem is in your if statements you should use == || === instead of =

now it works

let numField1 = document.getElementById('numField1');
let numField2 = document.getElementById('numField2');
let resultField = document.getElementById('resultField');
let form = document.getElementById('PercentageCalc');
let preInputText = document.getElementById('preInputText');
let numField1Text = document.getElementById('numField1Text');
let numField2Text = document.getElementById('numField2Text');
let CalcTypeSelector = document.getElementById('CalcTypeSelector');

CalcTypeSelector.addEventListener('change', function () {
    console.log(CalcTypeSelector.value);
    if (CalcTypeSelector.value == 'whatisXPofY') {
    preInputText.innerText = "What is";
    numField1Text.innerText = "% of";
    numField1.placeholder = "X";
    numField2Text.innerText = "?";
    numField2.placeholder = "Y";
} else if (CalcTypeSelector.value === 'XisYPofWhat') {
    numField1Text.innerText = "is";
    numField1.placeholder = "X";
    numField2Text.innerText = "% of what?";
    numField2.placeholder = "Y";
} else if (CalcTypeSelector.value === 'whatPofXisY') {
    preInputText.innerText = "What % of";
    numField1Text.innerText = "is";
    numField1.placeholder = "X";
    numField2Text.innerText = "?";
    numField2.placeholder = "Y";
}
});

form.addEventListener('submit', function (e) {

if (!numField1.value || !numField2.value ) {
    alert("Please enter number values in the fields")
} else {
    let x = parseFloat(numField1.value);
    let y = parseFloat(numField2.value);

    let result = x / y;
    let percent = result * 100;

    resultField.innerText = "Result: " + percent + "%";
    e.preventDefault();

}
});

<body>
<h1>Percentage Calculators</h1>
<form id="CalcType">
    <select id="CalcTypeSelector">
        <option>Choose and option</option>
        <option value="whatisXPofY">what is X percentage of Y?</option>
        <option value="XisYPofWhat">X is Y percentage of what?</option>
        <option value="whatPofXisY">what percentage of X is Y?</option>
        <option value="XPofWhatisY">X percentage of what is Y?</option>
        <option value="YPofXisWhat">Y percentage of X is what?</option>
    </select>
</form>
<div>
    <p>X is what percent of Y?</p>
    <form id="PercentageCalc">
        <label id="preInputText">gfg</label>
        <input type="text" id="numField1" />
        <label id="numField1Text">gfdg</label>
        <input type="text" id="numField2" />
        <label id="numField2Text">rter</label>
        <br />
        <br />
        <input type="submit" value="Calculate">
    </form>
</div>
<h3 id="resultField"></h3>

I did add the extra symbols and even though the syntax is right it still doesnt work the way its intended to. If you click on any action Itll change the input and labels but it will only change it to the first if statement.

Collectives™ on Stack Overflow

Changing a a html element with a if/else if statement based on a selected option

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related