如何让 onClick 一次执行多个相似的功能？

Question

我试图让 Button onClick 填充两个 #box 元素，并使用来自表单的相同输入。并且将来可能会添加更多的盒子。但它似乎只调用了前两个函数。这是代码笔示例！尝试以几种不同的方式更改 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>

Answer 1

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

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

在你的 JavaScript 上，

function onClick() {

  myFunction(); 

  myFunction2();

  lovely2(); 

  lovely5();

}

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

Answer 2

您可以调用另一个函数中的所有函数，并在单击按钮时触发该函数。我认为不可能一次调用 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;

}