如何让 onClick 一次执行多个类似的功能？答案

【问题标题】：How to make onClick perform multiple similar functions at once?如何让 onClick 一次执行多个类似的功能？
【发布时间】：2019-06-03 02:49:09
【问题描述】：

我正在尝试使 Button onClick 填充两个#box 元素，并使用来自表单的相同输入。并可能在未来添加更多盒子。但它似乎只调用了前 2 个函数。

这里是the codepen example！

尝试通过几种不同的方式更改 onclick 调用的语法。没有帮助

function myFunction() {
    var str = document.getElementById("myname").innerHTML;
    var res = str.replace("_____", 
    document.querySelector('input[name="name"]').value);
    document.getElementById("myname").innerHTML = res;
}
function myFunction2() {
    var str = document.getElementById("theirname").innerHTML;
    var res = str.replace("_____", 
    document.querySelector('input[name="theirname"]').value);
    document.getElementById("theirname").innerHTML = res;
}
function lovely2() {
    var str = document.getElementById("myname1").innerHTML;
    var res = str.replace("_____", 
    document.querySelector('input[name="name"]').value);
    document.getElementById("myname1").innerHTML = res;
}
function lovely5() {
    var str = document.getElementById("theirname1").innerHTML;
    var res = str.replace("_____", 
    document.querySelector('input[name="theirname1"]').value);
    document.getElementById("theirname1").innerHTML = res;
}

<div id="form1">
    <form>
        <p>
            <br><input type="text" class="name1" name="name" placeholder="VXA Name">
            <br>
        </p>
        <p><br><input type="text" class="name2" placeholder="CX Name" name="theirname"></p>
    </form>

    <div class="forms">
        <button onclick="myFunction(); myFunction2(); lovely2(); lovely5()">Fill Names</button>
        <button class="2" onclick="#">Reset</button>
    </div>

</div>

<div id="box1">
    <a>Thank you, </a>  <a id="theirname">_____</a>, for contacting Us. My name is<a id="myname"> _____, and I'd be more than happy to assist you today.
        <a class="copy">Copy text</a>
    </a>
</div>

<div id="box2">
    <a>Thank you, </a>  <a id="theirname1">_____</a>, for contacting Us. My name is<a id="myname1"> _____, and I'd be more than happy to assist you today.
        <a class="copy">Copy text</a>
    </a>
</div>

【问题讨论】：

你最好学会把你的 JavaScript 和你的 HTML 分开，真的......然后它就像Element.onclick = function(){ myFunction(); myFunction2(); lovely2(); lovely5(); } 一样简单。 Element 可以通过多种方式获得，包括 document.getElementById('yourHTMLid') （当然，在这种情况下，您需要您的元素具有 id 属性）。
lovely5 函数中有错字。 input[name="theirname1"] 应该是 input[name="theirname"]

标签： javascript function input onclick

【解决方案1】：

您可以通过这样做来简单地重构它，而不是尝试在单击事件上调用多个函数。 onClick() 作为处理点击事件的函数。

<button onclick="onClick()">Fill Names</button>

在你的 JavaScript 上，

function onClick() {
  myFunction(); 
  myFunction2();
  lovely2(); 
  lovely5();
}

onClick() 将在用户单击该按钮时触发，这将确保调用所有 4 个函数。

【讨论】：

这仍然只是填写第一个框。我不知道为什么，如果函数被调用，它没有填写表单
因为 myFunction2 里面有函数 lovely2 和 lovely5，也许你应该把它们移到外面，它会工作@TeaBadger

【解决方案2】：

您的代码中有一些错字 - } 和 input[name="theirname1"] 的位置不正确。

function myFunction() {
    var str = document.getElementById("myname").innerHTML;
    var res = str.replace("_____", 
    document.querySelector('input[name="name"]').value);
    document.getElementById("myname").innerHTML = res;
}
function myFunction2() {
    var str = document.getElementById("theirname").innerHTML;
    var res = str.replace("_____", 
    document.querySelector('input[name="theirname"]').value);
    document.getElementById("theirname").innerHTML = res;
}
function lovely2() {
    var str = document.getElementById("myname1").innerHTML;
    var res = str.replace("_____", 
    document.querySelector('input[name="name"]').value);
    document.getElementById("myname1").innerHTML = res;
}
function lovely5() {
    var str = document.getElementById("theirname").innerHTML;
    var res = str.replace("_____", 
    document.querySelector('input[name="theirname"]').value);
    document.getElementById("theirname1").innerHTML = res;
}

<div id="form1">
    <form>
        <p><br><input type="text" class="name1" name="name" placeholder="VXA Name">
        <br>
        </p>
        <p><br><input type="text" class="name2" placeholder="CX Name" name="theirname">
    </form>
    
    <div class="forms">
        <button onclick="myFunction(); myFunction2(); lovely2(); lovely5()">Fill Names</button>
        <button class="2" onclick="#">Reset</button>
    </div>
    
</div>

<div id="box1">
    <a>Thank you, </a>  <a id="theirname">_____</a>, for contacting Us. My name is<a id="myname"> _____, and I'd be more than happy to assist you today.
        <a class="copy">Copy text</a>
    </a>
</div>

<div id="box2">
    <a>Thank you, </a>  <a id="theirname1">_____</a>, for contacting Us. My name is<a id="myname1"> _____, and I'd be more than happy to assist you today.
        <a class="copy">Copy text</a>
    </a>
</div>

【讨论】：

谢谢，这很完美。错字是唯一导致该功能无效的原因吗？

【解决方案3】：

您可以在另一个函数中调用所有函数，并在单击按钮时触发该函数。我认为不可能一次调用 html 事件中的所有函数。

<button onclick="clicked()">Click me</button>

function clicked() {
    myFunction();
    myFunction2();
    lovely2();
    lovely5();
}

此代码仍然无法正常工作，因为在您当前的 javascript 中，lovely2() 和 lovely() 嵌套在 myFunction2() 中，因此您无法调用它们并且调用 myFunction2() 也不会调用它们。你需要把它们移到外面，像这样

function myFunction() {
var str = document.getElementById("myname").innerHTML;
var res = str.replace("_____", 
document.querySelector('input[name="name"]').value);
document.getElementById("myname").innerHTML = res;
}

function myFunction2() {
var str = document.getElementById("theirname").innerHTML;
var res = str.replace("_____", 
document.querySelector('input[name="theirname"]').value);
document.getElementById("theirname").innerHTML = res;
}

function lovely2() {
var str = document.getElementById("myname1").innerHTML;
var res = str.replace("_____", 
document.querySelector('input[name="name"]').value);
document.getElementById("myname1").innerHTML = res;
}

function lovely5() {
var str = document.getElementById("theirname1").innerHTML;
var res = str.replace("_____", 
document.querySelector('input[name="theirname1"]').value);
document.getElementById("theirname1").innerHTML = res;
}

【讨论】：