如何将 JavaScript if 子句嵌入 HTML 代码答案

【问题标题】：How to embed a JavaScript if clause into a HTML code如何将 JavaScript if 子句嵌入 HTML 代码
【发布时间】：2019-09-22 07:40:45
【问题描述】：

我想在 HTML 代码中嵌入 JavaScript if 子句。有两个名为 success 和 danger 的按钮由 if 子句分隔。我尝试了以下方式。

<script>
    if (1 < 18) {
</script>
       <button type="button" class="btn btn-success btn-rounded">Success</button>
<script>
    }
    else{
</script>
       <button type="button" class="btn btn-danger btn-rounded">Danger</button>
<script>
    }
</script>

但它不能正常工作。那我该怎么办呢。

【问题讨论】：

stackoverflow.com/questions/44109178/…的可能重复
实际上是stackoverflow.com/q/35163009/215552 的副本，它是用于Angular，而不是AngularJS。
你真的在 Angular 中这样做吗？您使用了标签，但您的示例中没有任何特定于 Angular 的代码，而且它通常不使用 <script> 标签。
@John Montgomery 是的，我正在使用角度。这是component.html 文件。我如何使用 if 子句来分隔这些按钮
改用*ngIf。

标签： javascript html angular

【解决方案1】：

您需要使用 JavaScript 编写 HTML 代码，见下文。

<script type="text/javascript">
var i = 0;
window.onload = function(){
if (i == 0)
{
     document.getElementById('somearea').innerHTML = '<input type="button" value="Some Value 1"/>';
}
else
{
     document.getElementById('somearea').innerHTML = '<input type="button" value="Some Value 2"/>';
}
}
    </script>

【讨论】：

【解决方案2】：

在 Angular 中有几种不同的方法可以做到这一点。最简单的改变就是使用*ngIf:

<button *ngIf="1 < 18" type="button" class="btn btn-success btn-rounded">Success</button>
<button *ngIf="1 >= 18" type="button" class="btn btn-danger btn-rounded">Danger</button>

【讨论】：