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

Question

我正在创建一个简单的网站，用于多个按钮的学习目的。目前，按钮(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;
}     

Answer 1

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>

你必须尝试这个代码，这是一个简单的代码隐藏和显示特定的划分。

Answer 2

您可以大大简化代码("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","female","other"],
relationship:["acquaintance","friend","lover","spouse"],
random:["q1","q2","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>