Question

我正在制作有2个方块的游戏，如果您单击右边的方块，您会赢。我有一个问题，当玩家单击一个框时，它不会显示他是赢还是输，只能在您检查元素时才能看到。

我已经尝试将“ console.log”更改为“ document.write”，但是它不起作用。有人可以告诉我当玩家点击一个框时如何写东西吗？

var button1 = document.getElementById('button1')
var button2 = document.getElementById('button2')
var array = [('button1'), ('button2')];
var winItem = 1;

function getRandomItemNum(length) {
  return Math.ceil(Math.random() * length)
}

function recalculateWinItem() {
  winItem = getRandomItemNum(array.length);
}

function checkIsWin(buttonNum) {
  console.log(`Clicked ${buttonNum}. Win item: ${winItem}`);
  console.log(buttonNum === winItem ? "You won" : "You lose");
}

recalculateWinItem();

<button id="button1" onclick="checkIsWin(1)" style="height: 200px; width: 200px; position: absolute; left: 33%; background-color: black; color: blue;">1</button>
<button id="button2" onclick="checkIsWin(2)" style="height: 200px; width: 200px; position: absolute; right: 33%; background-color: black; color: red;">2</button>

Answer 1

将容器添加到页面

<div id="result"></div>

并使用

document.getElementById("result").innerText = winItem ? "You won" : "You lose"; // or innerHTML if tags in the result

切勿在页面加载后使用document.write，因为它会擦除页面和脚本

function getRandomItemNum(length) {
  return Math.ceil(Math.random() * length)
}

function recalculateWinItem() {
  winItem = getRandomItemNum(array.length);
}

function checkIsWin(buttonNum) {
  var text = `Clicked <b>${buttonNum}</b>. Win item: ${winItem};  `
  text += buttonNum === winItem ? "You won" : "You lose";
  document.getElementById("result").innerHTML = text;
}
var array = [...document.querySelectorAll("#container .but")].map(function(but) { 
  but.addEventListener("click",function() { checkIsWin(+this.id.replace("button",""))})
  return `(${but.id})`
});
window.addEventListener("load", function() {
  document.getElementById("start").addEventListener("click", recalculateWinItem)
  recalculateWinItem();
})

.but {
  height: 200px;
  width: 200px;
  position: absolute;
  top: 10%;
  background-color: black;
}

#button1 {
  left: 33%;
  background-color: black;
  color: blue;
  color: blue;
}

#button2 {
  right: 33%;
  background-color: black;
  color: red;
}

<div id="result"></div>
<hr/>
<div id="container" style="width:100%">
  <button id="button1" class="but">1</button>
  <button id="button2" class="but">2</button>
</div>
<button type="button" id="start">Start</button>

Answer 2

document.write仅用于测试，不用于现实世界，请勿在工作中使用它，而是可以创建div或模式，例如将具有类或ID {{1} }，然后使用#modal来显示结果；

innerHTML

Answer 3

创建一个具有ID的paragrapg 获取段落的ID 并使用.innerhtml添加输出

document.getElementById('response').innerHTML='you win;

Answer 4

HTML

<button id="button1" onclick="checkIsWin(1)" style="height: 200px; width: 200px; position: absolute; left: 33%; background-color: black; color: blue;">1</button>
<button id="button2" onclick="checkIsWin(2)" style="height: 200px; width: 200px; position: absolute; right: 33%; background-color: black; color: red;">2</button>
<div id="container"></div>

JavaScript

function checkIsWin(buttonNum) {
  document.getElementById('container').innerText = (buttonNum === winItem ? "You won" : "You lose");
}

JavaScript没有写在页面上

4 个答案: