时间戳

首页 > 解决方案 > 为什么我的按钮不会触发我的 javascript 函数？

angular - 为什么我的按钮不会触发我的 javascript 函数？

问题描述

我有一个表单验证示例。如果我按下提交按钮，它必须显示警报消息但它没有显示。

这是我的示例： 示例链接

请帮我完成这件事。

我试过这样：

//button declaration

<button id="validateSubmit" [disabled]="reactForm.invalid" onclick="myFunction()" class="samplebtn e-control e-btn e-primary"
                            type="submit" style="height:40px;width: 150px;" data-ripple="true">Submit</button>
                            
//function for showing alert message
<script>
    function myFunction() {
        alert('your form is submitted');
    }
</script>

标签： angulartypescriptalert

解决方案

尊重代码约定非常重要。在计算机编程中，缩进风格是一种管理代码块缩进以传达程序结构的约定。但是，有些语言（例如 Python 和 occam）使用缩进来确定结构，而不是使用大括号或关键字；这被称为越位规则。

如果您像以前一样创建一些多空间，则会产生错误，因为它会认为您的class属性值为samplebtn e-control e-btn e-primary" type="submit" style="height:40px;width: 150px;" data-ripple="true">.

然后在它之后，它认为Submit是你的另一个属性button。这就是为什么它会在不知道如何处理您<之后产生错误的原因。

因此，再次，为了避免该错误，请遵守以下约定，它会很好用。

同一行约定

function myFunction() {
  alert('your form is submitted');
}
<button id="validateSubmit" [disabled]="reactForm.invalid" onclick="myFunction()" class="samplebtn e-control e-btn e-primary" type="submit" style="height:40px; width: 150px;" data-ripple="true">Submit</button>

缩进约定

另一种编写方法是缩进每个属性。

function myFunction() {
  alert('your form is submitted');
}
<button
  id="validateSubmit"
  [disabled]="reactForm.invalid"
  onclick="myFunction()"
  class="samplebtn e-control e-btn e-primary"
  type="submit"
  style="height:40px;width: 150px;"
  data-ripple="true">Submit</button>

推荐阅读