JavaScript/HTML - 将 onclick 按钮参数传递给 JavaScript 函数答案

【问题标题】：JavaScript/HTML - Passing onclick button parameter to JavaScript functionJavaScript/HTML - 将 onclick 按钮参数传递给 JavaScript 函数
【发布时间】：2020-04-15 14:33:21
【问题描述】：

我对 JavaScript 很陌生，所以如果这个问题有一个非常明显的答案，我深表歉意。我想要做的是通过 onclick 按钮将 HTML 中的文本框的名称传递给 Javascript 中的函数。该函数的目标是测试给定的字符串并根据某些参数突出显示它（对于我的测试，它只是长度）。

我知道并正在处理的函数中有多个奇怪的零碎，我知道这些函数的工作原理是当我删除参数并直接调用代码文本框时，它会打印出我期望的内容.但我希望能够传递多个文本框而不需要每个框的特定功能。

我的代码如下。我已将所有内容都包含在内，以防错误发生在我没想到的地方。

<!DOCTYPE html>
<html>
    <head>
        <style>
        .highlight {
        background-color: yellow;
        }
        </style>
    </head>
<body>

<label for="wordOne">Word One</label><br>
<input type="text" id="wordOne" name="wordOne"><br>
// Pass the value for the wordOne textbox to verify function
<button type="button" onclick="verify(wordOne,this)">Check</button><br><br>

<label for="wordTwo">Word Two</label><br>
<input type="text" id="wordTwo" name="wordTwo"><br>
// Pass the value for the wordTwo textbox to verify function
<button type="button" onclick="verify(wordTwo,this)">Check</button><br><br>
<p id="test"></p><br>
<p id="error"></p>

<script>
    // Highlights any code in a given line.
    function highlight(text,id,begin,end) {

        // document.getElementById("error").innerHTML = "TEST";

        var inputText = document.getElementById(id);
        var innerHTML = inputText.innerHTML;
        var index = innerHTML.indexOf(text)+begin;
        if (index >= 0) { 
            innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length-end);
        inputText.innerHTML = innerHTML;
        return string;
        }
    }
    function verify(button,el){
        var begin=1;
        var end=1
        var id="test";
        var string = document.getElementById(button).value; 
        var len=string.length;
        if(len>5)
        {
            document.getElementById(id).innerHTML = string +" "+len;
            highlight(string,id,begin,end);  
        }
        else
        {
            document.getElementById(id).innerHTML = string;
        }
    }
</script>

</body>
</html>

如果这非常明显，我再次道歉，但老实说我不确定我做错了什么。提前感谢您的帮助！

【问题讨论】：

如果我正确阅读了您的代码，那么您所缺少的只是您编写 highlight('e','wordOne') 而不是 highlight('e')
@CherryDT 对不起，老实说，我忘记了我留下了注释代码。这不是问题。这个想法是在任一文本框中输入一个单词，当按下“提交”按钮时，相应文本框的内容将传递给脚本中的验证函数。很抱歉造成混乱，我将通过代码并添加 cmets。我一开始就应该这样做。

标签： javascript html function button

【解决方案1】：

可以通过属性获取textbox的名称

var x = document.getElementsByTagName("INPUT")[0].getAttribute("name");

然后在你的函数中使用它

var x = document.getElementsByTagName("INPUT")[0].getAttribute("name"); 
 function highlight(x,id,begin,end) {

        // document.getElementById("error").innerHTML = "TEST";

        var inputText = document.getElementById(id);
        var innerHTML = inputText.innerHTML;
        var index = innerHTML.indexOf(text)+begin;
        if (index >= 0) { 
            innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length-end);
        inputText.innerHTML = innerHTML;
        return string;
        }
    }

注意：[0] 表示第一个是第一个文本框。

【讨论】：

如果您愿意，也可以使用var x = document.querySelector("input").name;。
@Kunal 我做到了，该网站告诉我，由于我的帐户是新帐户，因此投票是“记录在案”但不可见。我试了很多次。