Ändern eines HTML-Elements mit einer if/else if-Anweisung basierend auf einer ausgewählten Option

Ich möchte die Label-Tags und den Platzhalter der Eingabe für das Formular mit der ID "PercentageCalc" ändern. Ich möchte es basierend auf der ausgewählten Option für das Dropdown-Menü ändern. Ich habe verschiedene Möglichkeiten ausprobiert, um die Funktion zu schreiben und habe versucht, es .addEventListener zu geben. Kann es nicht herausfinden.Ändern eines HTML-Elements mit einer if/else if-Anweisung basierend auf einer ausgewählten Option

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>

Quelle

2017-12-26 Dakota Ruller

Das Problem ist in der if-Anweisungen sollten Sie == verwenden || === statt =

jetzt funktioniert es

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>

Quelle

2017-12-26 18:24:16

ich die zusätzlichen Symbole nicht hinzugefügt und obwohl die Syntax richtig ist es tut immer noch die Art und Weise arbeiten, um seine soll . Wenn Sie auf eine Aktion klicken, ändern Sie die Eingabe und die Beschriftungen, aber nur die erste if-Anweisung. –

Ändern eines HTML-Elements mit einer if/else if-Anweisung basierend auf einer ausgewählten Option

Antwort

Verwandte Themen