我想更改 id 为“PercentageCalc”的表单的标签标记和输入占位符。我希望它根据下拉菜单的选定选项进行更改。我尝试了不同的方法来编写该函数，并尝试为其提供 .addEventListener。似乎无法弄清楚。
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>
最佳答案
问题出在你的 if 语句中，你应该使用 == || === 而不是 =
现在可以了
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>关于javascript - 根据所选选项使用 if/else if 语句更改 html 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47982229/