时间戳

首页 > 解决方案 > 当我不想更新 javascript 中的 html 时，页面会不断刷新

javascript - 当我不想更新 javascript 中的 html 时，页面会不断刷新

问题描述

我一直在尝试解决这个问题，但是当将 innerhtml 设置为某些内容时，页面会不断刷新。我已经为此工作了一段时间，但我无法弄清楚。我看过其他人的代码，但自己无法弄清楚。

这是代码：

function myFunction(){
var primes = [];

function isPrime(num) {
  for(var i = 2; i <= num/2; i++)
    if(num % i === 0 ) return false;
    primes.push(num);

}

function listOfPrimes(min, max) {
	for(var j = min; j < max; j++)	
		isPrime(j);
}

	


	
var minimum = document.getElementById('Minimum').value;
var maximum = document.getElementById('Maximum').value;

listOfPrimes(minimum,maximum);// DO NOT ENTER DECIMALS!!! minimum and maximum numbers that you want.
primes = primes.filter(function(x){ return x > 1});
primes = primes.toString();


document.getElementById("Your_Primes").innerHTML = primes;

}

var button = document.querySelector("button");
          button.addEventListener("click", function() {
                myFunction();
          }); 
<!doctype html>

<html>
<head>
	<title>Prime Lister</title>
</head>
<body>

<form>

Minimum Number:<br>
<input type="number" placeholder="MinimumWholeNumber" id="Minimum" multiple="1" required><br><br>
Maximum Number:<br>
<input type="number" placeholder="MaximumWholeNumber" id="Maximum" multiple="1" required><br><br>
<button>Enter</button>
</form>


<p>Your Primes: <p id="Your_Primes"></p></p>
<script type="text/javascript" src="Web_Prime_Lister.js"></script>
</body>
</html>

标签： javascripthtml

解决方案

您的 javascript 存在一些严重问题。我重写了您的脚本，并将使用正确的 javascript 将其附加到此答案中：

var minimum;
var maximum;
var primes;

function myFunction(e) {
  e.preventDefault();
  minimum = document.getElementById('Minimum').value;
  maximum = document.getElementById('Maximum').value;
  primes = [];

  listOfPrimes(minimum, maximum); // DO NOT ENTER DECIMALS!!! minimum and maximum numbers that you want.  console.log(primes);
  primes = primes.filter(function(x) {
    return x > 1;
  });
  primes = primes.toString();
  document.getElementById("Your_Primes").innerHTML = primes;
}

function isPrime(num) {
  for (var i = 2; i <= num / 2; i++)
    if (num % i === 0) {
      return false;
    }
  primes.push(num);
}

function listOfPrimes(min, max) {
  for (var j = min; j < max; j++) {
    isPrime(j);
  }
}
<form>
  Minimum Number:<br>
  <input type="number" placeholder="MinimumWholeNumber" id="Minimum" multiple="1" required><br><br> Maximum Number:<br>
  <input type="number" placeholder="MaximumWholeNumber" id="Maximum" multiple="1" required><br><br>
  <button id="button" onclick="myFunction(event)">Enter</button>
</form>


<div>Your Primes:
  <p id="Your_Primes"></p>
</div>

我会告诉你你的代码到底有什么问题，但告诉你我做了什么更容易。您在函数中的基本逻辑是正确的，但您只是安排错了。首先，我实例化了您将在不同函数之间使用的变量以扩大范围。其次，我设置了myFunction将在单击时执行的函数，插入执行逻辑和查找素数的函数，并防止强制页面重新加载的事件默认值。最后，我将您在单击功能之外的语句放入其中，以便每次用户更改信息并单击按钮时它都可以更新所有信息。这些语句包括获取最小值和最大值、将数组更改为字符串以及设置内部 html。希望这可以帮助。

推荐阅读