如何html if语句

Question

我想只在语句为真时显示按钮:

<button type="button" id="btn1" class ="btn1"> btn1 </button>
<button type="button" id="btn2" class="btn2"> btn2 </button>
<script>          
var statement= 1;
if (statement== 1){
<button type="button" id="btn3" class="btn3"> btn3</button>
}

</script>

我的html看起来像这样。但是它不起作用，即使我的表述是1=1。我如何在没有按钮点击事件或一些交互的情况下实现这一工作?

Answer 1

您可以使用document.write直接写入HTML输出。(@Ivar在评论中提到)只要把脚本放在你想写东西的地方。

<button type="button" id="btn1" class="btn1"> btn1 </button>
<button type="button" id="btn2" class="btn2"> btn2 </button>
<script>
var statement = 1;
if (statement == 1) {
document.write('<button type="button" id="btn3" class="btn3"> btn3</button>');
}
</script>

您可以通过将脚本标记移动到想要插入按钮的位置来决定在哪里显示按钮。看到例子。

然而，更常用的方法是操作DOM而不是"回声"

你可以有一个按钮，并改变它的显示状态:

var statement = 1;
if (statement == 1) {
document.querySelector("#btn3").style.display = "inline-block"
}

<button type="button" id="btn1" class="btn1"> btn1 </button>
<button type="button" id="btn2" class="btn2"> btn2 </button>
<button type="button" id="btn3" class="btn3" style="display: none;"> btn3</button>

您可以创建一个按钮并将其添加到DOM:

const button = document.createElement("button")
button.type = "button"
button.id = "btn3"
button.classList.add("btn3") // Adds one class with the name btn3
button.textContent = "btn3" // Writes what is inside <button>....</button>
document.body.append(button) // Adds element below each other elements

<button type="button" id="btn1" class="btn1"> btn1 </button>
<button type="button" id="btn2" class="btn2"> btn2 </button>
<button type="button" id="btn3" class="btn3" style="display: none;"> btn3</button>

更多关于:

• https://www.w3schools.com/js/js_htmldom_methods.asp
• https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents(来源:@Teemu)
• https://www.youtube.com/watch?v=y17RuWkWdn8

Answer 2

<button type="button" id="btn1" class ="btn1"> btn1 </button>
<button type="button" id="btn2" class="btn2"> btn2 </button>
<script>          
var statement= 1;
if (statement == 1){
var x = document.createElement("button");
var t = document.createTextNode("Click me");
x.appendChild(t);
document.body.appendChild(x)
}

</script>