如何让 HTML 按钮触发 Javascript 函数

Question

我正在使用的 JSFiddle：https://jsfiddle.net/mL0uLx81/1/

我一直在尝试通过单击按钮触发一个名为 toggleCheckbox 的函数。

我试过在 input 标签上做 onclick="toggleCheckbox()"，我试过在 JS 文件中添加 document.getElementById("surveyButton").addEventListener("click", toggleCheckbox, false);。他们都没有工作，我不确定为什么。

Answer 1

在您的 JSFiddle 中，您使用的是 jquery 而未将其包含在 fiddle 本身中。 alert(); 可以，但 $

无效

下面还有其他错误已更正 @AdamKonieska 指出

勾选

您的新 HTML（删除了点击）：

<input type="button" value="Open" id="surveyButton" />

您的新 JS（在 $("#toggle").prop('checked', false); 中将 true 更改为 false）：

var toggleCheckbox = function() {

  if ($("#toggle").is(':checked')) {
    SurveyDisappear();
  } else {
    SurveyAppear();
  }
}

var SurveyAppear = function() {
  $("#surveyButton").prop('value', 'Close');
  $("#toggle").prop('checked', true);
}

var SurveyDisappear = function() {
  $("#surveyButton").prop('value', 'Open');
  $("#toggle").prop('checked', false);
}

document.getElementById("surveyButton").addEventListener("click", toggleCheckbox, false);

Answer 2

请在下面找到plunker link https://plnkr.co/edit/vYvi4F45s6PpKrRvwqsA?p=preview

可能存在拼写错误

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <input onclick="sampleFun()" type="button" value="button"/>
  </body>
</html>

// Code goes here
function sampleFun() {
  alert('hello');
}

Answer 3

如果您使用 jQuery，您可以 select 指定按钮的输入标签，并为其附加一个 .click() 侦听器，如下所示：

$('[type=submit]').click(function() {
     toggleCheckbox();
});

否则，我认为你做对了。希望我的上述解决方案有所帮助！

Answer 4

你已经很接近了，只需修复几个问题。

首先，您没有在 JS fiddle 中包含 jQuery。其次，您的 toggleCheckbox 函数不在全局范围内，因此无法内联访问。最后，您需要更新 appear/disappear 函数。看起来他们没有以相同的方式切换复选框和按钮。

更新代码

HTML

<input type="checkbox" name="toggle" id="toggle" />
<input type="button" value="Open" id="surveyButton" /> <!--removed inline JS-->

JavaScript

function toggleCheckbox() { //moved function to global scope, if you wanted to add the listner inline you'd do it this way.

  if($("#toggle").is(':checked')) {
    SurveyAppear();
  }  else {
    SurveyDisappear();
  }
}

var SurveyAppear = function() {
  $("#surveyButton").prop('value', 'Open'); //switched from Close
  $("#toggle").prop('checked', false); //changed to false
}

var SurveyDisappear = function() {
  $("#surveyButton").prop('value', 'Close'); //switched from Open
  $("#toggle").prop('checked', true);
}

document.getElementById("surveyButton").addEventListener("click", toggleCheckbox, false);

在更新后的 fiddle 中查看它的运行情况。 https://jsfiddle.net/igor_9000/mL0uLx81/2/

希望对您有所帮助！

如何让 HTML 按钮触发 Javascript 函数

How to make an HTML button trigger a Javascript function

html

javascript

jquery

dom-events

更新代码