如何使不同的按钮在同一位置打印？

如何解决如何使不同的按钮在同一位置打印？

我正在使用多个按钮创建一个用于学习目的的简单网站。目前，按钮（HTML）在不同位置打印值，但是我希望它在同一位置打印。那是：

单击按钮1，将值Y打印在X上。 单击按钮2，值Y消失，值Z在X上打印。 等等

我尝试了不同的方法，但无法使其正常工作。

这是我的HTML代码：

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <button type="button" class="btn btn-primary btn-lg" onclick="sexF()">sex</button><br><br>
                <h1><span id="sex"></span></h1><br><br>
        </div>

        <div class="col-sm-4">
            <button type="button" class="btn btn-primary btn-lg" onclick="relationshipF()">relationship</button><br><br>
                <h1><span id="relationship"></span></h1><br><br>
        </div>

        <div class="col-sm-4">
            <button type="button" class="btn btn-primary btn-lg" onclick="randomF()">random</button><br><br>
                <h1><span id="random"></span></h1><br><br>
        </div>
    </div>
</div>

这是我的JS代码：

var sex = ["(array1)"]
        
var relationship = ["(array2)"]
        
var random = ["(array3)"]

function sexF() {
    var sexQuestion = sex[Math.floor(Math.random() * sex.length)];
    document.getElementById("sex").innerHTML = sexQuestion;
}

function relationshipF() {
    var relationshipQuestion = relationship[Math.floor(Math.random() * relationship.length)];
    document.getElementById("relationship").innerHTML = relationshipQuestion;
}

function randomF() {
    var randomQuestion = random[Math.floor(Math.random() * random.length)];
    document.getElementById("random").innerHTML = randomQuestion;
}     

解决方法

var sex = ["(array1)"]
        
var relationship = ["(array2)"]
        
var random = ["(array3)"]

function sexF() {
    var sexQuestion = sex[Math.floor(Math.random() * sex.length)];
    document.getElementById("sex").innerHTML = sexQuestion;
    document.getElementById("div1").style.display="none";
    document.getElementById("div2").style.display="block";
}

function relationshipF() {
    var relationshipQuestion = relationship[Math.floor(Math.random() * relationship.length)];
    document.getElementById("relationship").innerHTML = relationshipQuestion;
    document.getElementById("div2").style.display="none";
    document.getElementById("div3").style.display="block";
}

function randomF() {
    var randomQuestion = random[Math.floor(Math.random() * random.length)];
    document.getElementById("random").innerHTML = randomQuestion;
}     

<div class="container">
    <div class="row">
        <div class="col-sm-4" id="div1">
            <button type="button" class="btn btn-primary btn-lg" onclick="sexF()">sex</button><br><br>
                <h1><span id="sex"></span></h1><br><br>
        </div>

        <div class="col-sm-4"  style="display:none" id="div2">
            <button type="button" class="btn btn-primary btn-lg" onclick="relationshipF()">relationship</button><br><br>
                <h1><span id="relationship"></span></h1><br><br>
        </div>

        <div class="col-sm-4"  style="display:none" id="div3">
            <button type="button" class="btn btn-primary btn-lg" onclick="randomF()">random</button><br><br>
                <h1><span id="random"></span></h1><br><br>
        </div>
    </div>
</div>

您必须尝试这段代码，这是简单的代码隐藏并显示该特定区域。

,

您可以简化代码很多（“ DRY” =不要重复自己！）：

const sex = ["male","female","other"],relationship = ["acquaintance","friend","lover","spouse"],random = ["q1","q2","q3"];

function ask(topic) {
  document.getElementById("question").innerHTML =
   topic[Math.floor(Math.random() * topic.length)];
}

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <button type="button" class="btn btn-primary btn-lg" onclick="ask(sex)">sex</button>
    </div>
    <div class="col-sm-4">
      <button type="button" class="btn btn-primary btn-lg" onclick="ask(relationship)">relationship</button>
    </div>
    <div class="col-sm-4">
      <button type="button" class="btn btn-primary btn-lg" onclick="ask(random)">random</button>
    </div>
  </div>
</div><br><br>
<h1><span id="question"></span></h1>

或者，以更简化的形式看起来可能像这样：

const topics={
  sex:["male",relationship:["acquaintance",random:["q1","q3"] };

document.querySelector(".container").onclick=ev=>{
  if (ev.target.tagName=="BUTTON") {
   let t=topics[ev.target.innerText];
   document.getElementById("question").innerHTML =
     t[Math.floor(Math.random() * t.length)];
  }
}

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <button type="button" class="btn btn-primary btn-lg">sex</button>
    </div>
    <div class="col-sm-4">
      <button type="button" class="btn btn-primary btn-lg">relationship</button>
    </div>
    <div class="col-sm-4">
      <button type="button" class="btn btn-primary btn-lg">random</button>
    </div>
  </div>
</div><br><br>
<h1><span id="question"></span></h1>