如何使用javascript在段落中显示代码

Question

我是javascript初学者。我试着在控制台中对fizzbuzz进行编码，效果很好。但我无法在段落标记中显示结果。标记将很快更改为其默认值。预期输出-显示范围从1到userInput值。

<form>
<label for="inputType"> Enter a number to start</label>
<input  id ="inputType" type = "number" value="1">
<button onclick="myFunction()"> Enter</button>
</form>
<p id="demo"> Result</p>
<script>
function myFunction() {
let userInput = document.getElementById("inputType").value;
let para = document.getElementById("demo");
for(let i=1;i<=userInput;i++){
if(i% 3 === 0 &&  i%5 ===0) {
para.textContent= "Fizzbuzz";
} else if (i% 5 === 0){
para.textContent = "buzz";
} else if(i %3 === 0){
para.textContent = "fizz";
} else{
para.textContent = i;
}
}
return userInput;
}
myFunction();
</script>

Answer 1

单击Enter按钮后，页面将重新加载，以防止

选项1：您可以从HTML传递事件，并使用preventDefault停止重新加载

<form>
<label for="inputType"> Enter a number to start</label>
<input  id ="inputType" type = "number" value="1">
<button onclick="myFunction(event)"> Enter</button>
</form>
<p id="demo"> Result</p>
<script>
function myFunction(event) {
event.preventDefault();
let userInput = document.getElementById("inputType").value;
let para = document.getElementById("demo");
for(let i=1;i<=userInput;i++){
if(i% 3 === 0 &&  i%5 ===0) {
para.textContent= "Fizzbuzz";
} else if (i% 5 === 0){
para.textContent = "buzz";
} else if(i %3 === 0){
para.textContent = "fizz";
} else{
para.textContent = i;
}
}
return userInput;
}
</script>

选项2：在表单标记中添加onSubmit处理程序并返回false，这样在提交时就不会重新加载

<form onSubmit="return false">

选项3：您可以从该方法返回false，并将按钮标签更改为

<button onclick="return myFunction()"> Enter</button>