如何让 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() {&nbsp; myFunction();&nbsp;&nbsp; myFunction2();&nbsp; lovely2();&nbsp;&nbsp; lovely5();}onClick() 当用户单击该按钮时将被触发，这将确保所有 4 个函数都将被调用。

Answer 2

您可以调用另一个函数中的所有函数，并在单击按钮时触发该函数。我认为不可能一次调用 html 事件中的所有函数。<button onclick="clicked()">Click me</button>function clicked() {&nbsp; &nbsp; myFunction();&nbsp; &nbsp; myFunction2();&nbsp; &nbsp; lovely2();&nbsp; &nbsp; lovely5();}这段代码仍然无法正常工作，因为在您当前的 javascript 中，lovely2() 和lovely() 嵌套在 myFunction2() 中，因此您无法调用它们，调用 myFunction2() 也不会调用它们。你需要把它们移到外面，像这样function myFunction() {var str = document.getElementById("myname").innerHTML;var res = str.replace("_____",&nbsp;document.querySelector('input[name="name"]').value);document.getElementById("myname").innerHTML = res;}function myFunction2() {var str = document.getElementById("theirname").innerHTML;var res = str.replace("_____",&nbsp;document.querySelector('input[name="theirname"]').value);document.getElementById("theirname").innerHTML = res;}function lovely2() {var str = document.getElementById("myname1").innerHTML;var res = str.replace("_____",&nbsp;document.querySelector('input[name="name"]').value);document.getElementById("myname1").innerHTML = res;}function lovely5() {var str = document.getElementById("theirname1").innerHTML;var res = str.replace("_____",&nbsp;document.querySelector('input[name="theirname1"]').value);document.getElementById("theirname1").innerHTML = res;}