Question

我需要在“ Guessgame.html”文件的html部分添加“重试”按钮，并修改脚本以使其在单击时运行。这就是我现在所拥有的：

var target = 8;
var guess = prompt("I’m an integer between 1 and 10\n 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>

Answer 1

页面加载后切勿使用document.write
创建按钮并添加事件监听器：

function init() {
  var target = Math.floor(Math.random() * 10) + 1;
  var guess = prompt("I’m an integer between 1 and 10\n 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 10\n 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>

Answer 2

将脚本包装在函数中

<!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 10\n Guess me", 0);
    var result = (guess == target) ? "Brilliant! Good guess.":"Sorry your guess was wrong.";
    document.getElementById("result").innerHTML = (result);}
    run();
    </script>
    
    </body>
    </html>

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

2 个答案: