如何 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 看起来像这个 atm。但它不起作用，即使我的陈述是 1=1。我如何在没有按钮点击事件或一些交互的情况下实现这个工作？

Answer 1

您可以在评论中使用document.write to directly write into the HTML output. (Mentioned by @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>

您可以通过将脚本标记移动到要插入它的位置来决定按钮的显示位置。 See example.

然而，更常用的方法是 操纵 DOM 而不是在 JavaScript.

中“回显”你的结果

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

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>

更多关于：

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>

如何 html if 语句

How to html if statement

html

javascript