如何在HTML中创建一个重新启动脚本的按钮

我需要在'guessgame.html'文件的HTML部分中添加一个'重新尝试'按钮，并修改单击时运行的脚本。这就是我现在拥有的：

var target = 8;
var guess = prompt("I’m an integer between 1 and 10n Guess me", 0);
var result = (guess == target) ? "Brilliant! Good guess." : "Sorry your guess was wrong.";
document.write(result);

h1 {
  font-family: serif;
  font-size: 36px;
  color: #ff0000;
  text-align: center
}
h2 {
  font-family: sans-serif;
  font-size: 24px;
  color: #000000;
  text-align: center
}
h3 {
  font-family: sans-serif;
  font-size: 12px;
  color: #0000ff
}

<title>Javascript template</title>
<div align="center">
  <h1>Beginning Javascript</h1>
</div>

永远不要使用文档。
创建一个按钮并添加事件侦听器：

function init() {
  var target = Math.floor(Math.random() * 10) + 1;
  var guess = prompt("I’m an integer between 1 and 10n Guess me", 0);
  var result = (guess == target) ? "Brilliant! Good guess." : "Sorry your guess was wrong.";
  document.querySelector("#res").innerText = result;
}
window.addEventListener("load", function() { // when page has loaded 
  document.querySelector("#but").addEventListener("click", init);
  // init(); // uncomment this if you want the question to show when page loads too
})

h1 {
  font-family: serif;
  font-size: 36px;
  color: #ff0000;
  text-align: center
}
h2 {
  font-family: sans-serif;
  font-size: 24px;
  color: #000000;
  text-align: center
}
h3 {
  font-family: sans-serif;
  font-size: 12px;
  color: #0000ff
}

<title>Javascript template</title>
<div align="center">
  <h1>Beginning Javascript</h1>
  <button id="but" type="button">Hit me</button><br/>
  <span id="res"></span>
</div>

更简单的版本，如果您只需每个页面加载一个数字并坚持不建议使用的内联事件处理

var target = 8;
function init() {
  var guess = prompt("I’m an integer between 1 and 10n Guess me", 0);
  var result = (guess == target) ? "Brilliant! Good guess." : "Sorry your guess was wrong.";
  document.querySelector("#res").innerText = result;
}
init();

h1 {
  font-family: serif;
  font-size: 36px;
  color: #ff0000;
  text-align: center
}
h2 {
  font-family: sans-serif;
  font-size: 24px;
  color: #000000;
  text-align: center
}
h3 {
  font-family: sans-serif;
  font-size: 12px;
  color: #0000ff
}

<title>Javascript template</title>
<div align="center">
  <h1>Beginning Javascript</h1>
  <button id="but" type="button" onclick="init()">Restart</button><br/>
  <span id="res"></span>
</div>

将脚本包装在功能

中

<!DOCTYPE html>
    <html>
    <head>
    <title>Javascript template</title>
    <style>
    h1 {font-family:serif; font-size:36px; color:#ff0000; text-align:center}
    h2 {font-family:sans-serif; font-size:24px; color:#000000; text-align:center}
    h3 {font-family:sans-serif; font-size:12px; color:#0000ff}
    </style>
    </head>
    <body>
     <div id="result" align="center">
    <h1>Beginning Javascript</h1>
     </div>
     
     <button onclick=run()>Restart</button>
    
    <script>
function run(){
    var target = 8;
    var guess = prompt ("I’m an integer between 1 and 10n Guess me", 0);
    var result = (guess == target) ? "Brilliant! Good guess.":"Sorry your guess was wrong.";
    document.getElementById("result").innerHTML = (result);}
    run();
    </script>
    
    </body>
    </html>

相关内容

最新更新

热门标签：