Question

我一直在努力解决这个问题，但是当它将innerhtml设置为某个东西时，页面会保持刷新。我已经研究了一段时间，但我无法弄明白。我查看了其他人的代码，但是我自己也找不到它。

以下是代码：

＆＃13;

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();
          });

＆＃13;

<!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>

＆＃13;

Answer 1

您的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。希望这会有所帮助。

当我不想在javascript中更新html时，页面会保持清晰

1 个答案: