英文:
Can't get Result to show with HTML Forms and Javascript
问题
我尝试让我的结果显示在文本框输入框中，按照我的任务要求，但我无法让它们显示出来。数学部分根本不显示，所以我的主要问题是无法让代码显示在框中。
document.querySelector("#buttonS").addEventListener("click", function(e) {
if (document.querySelector("#gallons").reportValidity()) {
let gallons = document.querySelector("#gallons").value;
if (document.querySelector("#quarts").checked) {
quartsTotal = gallons * 4;
document.querySelector("#quartsResult").placeholder = `quartsTotal`);
} else if (document.querySelector("#pints").checked) {
// ...
} else if (document.querySelector("#cups").checked) {
// ...
}
}
});
<form id="bakimg">
<input type="number" step=".01" min="0" id="gallons" required><label for="gallons"> 你有多少加仑的牛奶？</label>
<br>
<br>
<label for="conversion">你想要哪种转换？</label><br>
<input type="radio" value="quarts" name="gallonsC" checked><label for="quarts">夸脱</label>
<input type="radio" value="pints" name="gallonsC"><label for="pints">品脱</label>
<input type="radio" value="cups" name="gallonsC"><label for="cups">杯子</label>
</form>
<br>
<button type="button" id="buttonS">提交</button><br>
<h1>结果</h1>
<br>
<input type="text" id="quartsResult" placeholder=""><label for="quartsResult">夸脱</label><br>
<input type="text" id="pintsResult"><label for="pintsResult">品脱</label><br>
<input type="text" id="cupsResult"><label for="cupsResult">杯子</label>
</div>
英文:
I'm trying to get my results to show up in the text box inputs as per my assignment but I can't get them to show up at all. The math isn't showing up at all so my big issue is that I can't get the code to show up in the box.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
document.querySelector.("#buttonS").addEventListener("click", function(e) {
if (document.querySelector("#gallons").reportValidity()) {
let gallons = document.querySelector("#gallons").value;
if (document.querySelector("#quarts").checked) {
quartsTotal = gallons * 4;
document.querySelector("#quartsResult").placeholder = `quartsTotal`);
} else if (document.querySelector("#pints").checked) {
} else if (document.querySelector("#cups").checked) {
}
}
});
<!-- language: lang-html -->
<form id="bakimg">
<input type="number" step=".01" min="0" id="gallons" required><label for="gallons"> How many gallons of milk do you have?</label>
<br>
<br>
<label for="conversion">Which conversion would you like?</label><br>
<input type="radio" value="quarts" name="gallonsC" checked><label for="quarts">Quarts</label>
<input type="radio" value="pints" name="gallonsC"><label for="pints">Pints</label>
<input type="radio" value="cups" name="gallonsC"><label for="cups">Cups</label>
</form>
<br>
<button type="button" id="buttonS">Submit</button><br>
<h1>Results</h1>
<br>
<input type="text" id="quartsResult" placeholder=""><label for="quartsResult">Quarts</label><br>
<input type="text" id="pintsResult"><label for="pintsResult">Pints</label><br>
<input type="text" id="cupsResult"><label for="cupsResult">Cups</label>
</div>
<!-- end snippet -->
答案1
得分: 2
- 检查你的语法并进行以下更改：
document.querySelector("#buttonS")
应该写成这样：
document.querySelector("#buttonS") // querySelector 后面不需要 .
- 检查额外的括号：
document.querySelector("#quartsResult").placeholder = `quartsTotal`); // <-- 移除结尾的括号
- 在 HTML 输入元素（quarts、pints、cups）中添加适当的 ID：
<input type="radio" value="quarts" name="gallonsC" checked id="quarts">
<input type="radio" value="pints" name="gallonsC" id="pints">
<input type="radio" value="cups" name="gallonsC" id="cups">
- 移除反引号以使用变量值（否则 quartsTotal 仍然是字符串）：
`quartsTotal` -> quartsTotal
// 或许这是你的意思：
`${quartsTotal}`
祝你在任务中好运！
英文:
Check your syntax and make the following changes:
- Check the browser console for errors and use the appropriate syntax:
document.querySelector.("#buttonS")
should be written like this:
document.querySelector("#buttonS") // No . after querySelector
- Check the extra parentheses:
document.querySelector("#quartsResult").placeholder = `quartsTotal`); // <-- Remove the closing parens
- Add the proper IDs to the HTML input elements (quarts, pints, cups):
<input type="radio" value="quarts" name="gallonsC" checked id="quarts">
<input type="radio" value="pints" name="gallonsC" id="pints">
<input type="radio" value="cups" name="gallonsC" id="cups">
- Remove the backticks in order to use the variable value (otherwise quartsTotal is still a string):
`quartsTotal` -> quartsTotal
// Perhaps this is what you meant:
`${quartsTotal}`
Good luck with the assignment!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论