Question

我有一个小问题，我有两组两个按钮，当我按下顶部按钮对时，它们会在按钮下方显示输出java数组文本。在它下面的第二组按钮上，它显示按钮上方的文字，我不知道它为什么这样做。这是代码：

function Timeofday() {
  var myArray = new Array("One", "Two", "Three", "Four", );
  var random = myArray[Math.floor(Math.random() * myArray.length)];

  document.getElementById("zemo").innerHTML = random;
}

function Weather() {
  var myArray = new Array("One", "Two", "Three", "Four", );
  var random = myArray[Math.floor(Math.random() * myArray.length)];

  document.getElementById("temo").innerHTML = random;
}

function GetValue() {
  var myArray = new Array("One", "Two", "Three", "Four", );
  var random = myArray[Math.floor(Math.random() * myArray.length)];

  document.getElementById("remo").innerHTML = random;
}

function getRandomArrayElements(count) {
  var arr = ['one', 'two', 'three', 'four'];
  var shuffled = arr.slice(0),
    i = arr.length,
    min = i - count,
    temp, index;
  while (i-- > min) {
    index = Math.floor((i + 1) * Math.random());
    temp = shuffled[index];
    shuffled[index] = shuffled[i];
    shuffled[i] = temp;
  }
  document.getElementById("demo").innerHTML = shuffled.slice(min);
}

.button {
  background-color: #008CBA;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  top: 50%;
}

.wrapper {
  text-align: center;
}

.demo {
  text-align: center;
  color: #008CBA;
  text-transform: uppercase;
  font-size: 300%;
}

.remo {
  text-align: center;
  color: #008CBA;
  text-transform: uppercase;
  font-size: 300%;
}

.temo {
  text-align: center;
  color: #4CAF50;
  text-transform: uppercase;
  font-size: 300%;
}

.zemo {
  text-align: center;
  color: #4CAF50;
  text-transform: uppercase;
  font-size: 300%;
}

.buttons {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  top: 50%;
}

<div class="wrapper">
  <input id="btnSearch" class="button" type="button" value="Randomize Subject" onclick="getRandomArrayElements(3);" />
  <input id="btnSearch" class="button" type="button" value="Randomize 
    Restriction" onclick="GetValue();" />
</div>
<p id="demo" class="demo"></p>
<p id="remo" class="remo"></p>
<p id="temo" class="temo"></p>
<p id="zemo" class="zemo"></p>

<div>
  <div>
    <div>
    </div>
  </div>

  This is where the text displays above the buttons

  <div class="wrapper">
    <input id="btnSearch" class="buttons" type="button" value="Randomize Time of 
    Day" onclick="Timeofday();" />
    <input id="btnSearch" class="buttons" type="button" value="Randomize 
    Weather" onclick="Weather();" />
  </div>

  <div>

Answer 1

原因是HTML文件中元素的顺序。 javascript正在选择<p>标签并用函数的结果填充它们。 <p>代码位于第一组按钮下方，位于HTML文件中的第二组按钮上方

Answer 2

因为你总是在temo和zemo上设置innerHTML用于底部按钮，它们位于按钮上方。

如果您想要下面的下一个，只需将这些div移动到第二组按钮下方。如果您正在尝试做其他事情，请编辑您的问题并澄清。

按钮Javascript问题的文本输出

2 个答案: