Question

我有一个包含JavaScript函数的JSP。在我创建了一个内部html代码。它包含一个带onClick函数的按钮。当点击按钮时我想将2个参数传递给JavaScript函数。但我无法正确获得2个值。请帮助我

谢谢

 <script type="text/javascript">
 function find(){
     var i=0;
     var servicetypevalue="SERVICE";
     var td7= document.createElement("td");     
     td7.innerHTML='<input type="button" value="View Status" class=button name="ptBtn" id="ptBtn" onClick="getStatus('i,servicetypevalue');">';
 }

 function getStatus(i,servicetypevalue){
     alert("enter");
 }
</script>

我想显示输入提醒。但参数值未正确传递。

Answer 1

td7.innerHTML='<input type="button" value="View Status" class=button name="ptBtn" id="ptBtn" onClick="getStatus(' + i + ',' + servicetypevalue + ');">';

使用上面给出的字符串连接。

Answer 2

如果你要在JS中生成自己的元素，那么它与jQuery不同。在jQuery中，您可以可靠地将字符串转换为有效的标记，但JS并不那么复杂。是的，你可以通过innerHTML制作一个元素，但它容易出错。在普通JS中完成所需的过程如下：

＃1。创建一个元素。

＃2。将元素附加到父元素。

＃3。向元素添加属性。

你的代码的方式，它不会工作，因为你跳过＃2。 .td7永远不会附加在DOM上，如果.td7的innerHTML被渲染，那么它可能会成功。 addEventListener不是使用限制你的内联事件，而是为您提供更好的控制并且更易于管理。此外，您的getStatus只会提醒“enter”，这并不能证明您的2个参数实际上已通过。我添加了另一个警报作为参数传递的证明。

var i = 0;
var servicetypevalue = "SERVICE";
var host = document.querySelector('body');
var td7 = document.createElement('td'); //#1
var ptBtn = document.createElement("button"); //#1
host.appendChild(td7); //#2
td7.appendChild(ptBtn); //#2
ptBtn.className = "button"; //#3
ptBtn.name = "ptBtn"; //#3
ptBtn.id = "ptBtn"; //#3
ptBtn.innerHTML = "View Status"; //#3

function getStatus(i, servicetypevalue) {
  alert("enter");
  alert("i: " + i + "\nservicetypevalue: " + servicetypevalue)
}

ptBtn.addEventListener('click', function(event) {
  getStatus(i, servicetypevalue);
}, false);

window.load = find;

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>

</body>

</html>

Answer 3

尝试替换

td7.innerHTML='<input type="button" value="View Status" class=button name="ptBtn" id="ptBtn" onClick="getStatus('i,servicetypevalue');">';

到

td7.innerHTML='<input type="button" value="View Status" class=button name="ptBtn" id="ptBtn" onClick="' + "getStatus('i','servicetypevalue'" + ');">';

想要在innerhtml中使用2个参数调用javascript函数

3 个答案: