英文:
Printing all the numbers in html using a function that contains for loop and conditions statements
问题
我尝试使用一个包含for循环和条件语句的函数来解决FizzBuzz问题，然后将其引用到我的HTML文档中。该函数可以正确计算输入的值，例如，如果输入为1，则显示1，如果输入为3，则显示Fizz等等。问题在于它只打印出了该数字的条件答案，而不是直到输入的那个数字为止的所有数字。如果我输入18，它只显示FizzBuzz，而不显示直到18的所有数字。我不明白我错过了什么或者哪里出了问题，我仍然在努力使用调试器找出原因。
<label for="num">输入一个数字：</label>
<input type="number" id="num" name="num">
<button id="btn">开始</button>
<p id="result"></p>
<script>
let btn = document.getElementById("btn");
btn.addEventListener("click", fizzBuzz);
function fizzBuzz() {
let number = document.getElementById("num").value;
for (let i = 1; i <= number; i++) {
let appendString = "";
if (i % 3 === 0) {
appendString += "Fizz";
}
if (i % 5 === 0) {
appendString += "Buzz";
}
if (appendString === "") {
document.getElementById("result").innerHTML = i;
} else {
document.getElementById("result").innerHTML = appendString;
}
}
}
</script>
英文:
I've tried to solve the FizzBuzz problem using a function that contains a for loop and conditions statement and then to do references to my html document. The function calculates correct the value from the input, for example it shows 1 if it is 1, fizz if the number is 3 and so on. The issue is that it prints only the answer of the condition for that number and not all the numbers until the one that is introduced. If I type 18, it display only FizzBuzz and not all the numbers until it reaches 18 for example. I don't understand what I miss or what is wrong and I still struggle with using the debugger to find out.
<label for = "num">Enter a number: </label>
<input type ="number" id ="num" name ="num">
<button id = "btn">Play</button>
<p id = "result"></p>
<script>
let btn = document.getElementById("btn");
btn.addEventListener("click", fizzBuzz);
function fizzBuzz() {
let number = document.getElementById("num").value;
for (let i=1; i<=number; i++) {
let appendString = "";
if (i%3 === 0) {
appendString += "Fizz";
}
if (i%5 === 0) {
appendString += "Buzz";
}
if (appendString === "") {
document.getElementById("result").innerHTML = i;
} else {
document.getElementById("result").innerHTML = appendString;
}
}
}
</script>
答案1
得分: 2
欢迎来到StackExchange！
查看您的代码，看起来您正在使用=来设置innerHtml，这将用新值覆盖内容。您需要将其替换为+=（追加，因此x += 1等同于x = x + 1）
<label for="num">输入一个数字：</label>
<input type="number" id="num" name="num">
<button id="btn">播放</button>
<p id="result"></p>
<script>
let btn = document.getElementById("btn");
btn.addEventListener("click", fizzBuzz);
function fizzBuzz() {
let number = document.getElementById("num").value;
for (let i=1; i<=number; i++) {
let appendString = "";
if (i%3 === 0) {
appendString += "Fizz";
}
if (i%5 === 0) {
appendString += "Buzz";
}
// !! 我们将这两个从 = 改为了 +=
if (appendString === "") {
document.getElementById("result").innerHTML += i;
} else {
document.getElementById("result").innerHTML += appendString;
}
}
}
</script>
还有一些额外的事情可以做，以使其更漂亮，例如在开始时清除innerHtml（可以将其设置为空字符串""）并在附加的字符串之间添加一些分隔符。
英文:
and welcome to StackExchange!
Looking at your code, it looks like you are setting the innerHtml using = which will overwrite the contents with the new value. You will want to replace that with the += (append, so x += 1 is the same as x = x + 1)
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<label for = "num">Enter a number: </label>
<input type ="number" id ="num" name ="num">
<button id = "btn">Play</button>
<p id = "result"></p>
<script>
let btn = document.getElementById("btn");
btn.addEventListener("click", fizzBuzz);
function fizzBuzz() {
let number = document.getElementById("num").value;
for (let i=1; i<=number; i++) {
let appendString = "";
if (i%3 === 0) {
appendString += "Fizz";
}
if (i%5 === 0) {
appendString += "Buzz";
}
// !! We changed these two from = to += !!
if (appendString === "") {
document.getElementById("result").innerHTML += i;
} else {
document.getElementById("result").innerHTML += appendString;
}
}
}
</script>
<!-- end snippet -->
There will be some additional things you can do to make it prettier, like clearing the innerHtml at the start (you can set to empty string "") and adding some seperator between the appended strings
答案2
得分: 0
不要回答我要翻译的问题。以下是要翻译的内容：
"Instead of saying document.getElementById("result").innerHTML = i;, you should instead append it, like so:
if (appendString === "") {
document.getElementById("result").innerHTML += i;
} else {
document.getElementById("result").innerHTML += appendString;
}
```"
<details>
<summary>英文:</summary>
Instead of saying `document.getElementById("result").innerHTML = i;`, you should instead append it, like so:
```javascript
if (appendString === "") {
document.getElementById("result").innerHTML += i;
} else {
document.getElementById("result").innerHTML += appendString;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论