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

您不必尝试在click事件上调用多个功能，而是可以通过执行此操作来重构它。 onClick()充当处理点击事件的功能。

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

在您的JavaScript上，

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

当用户单击该按钮时，将触发

onClick()，这将确保调用这四个功能。

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;
}

Answer 3

您的代码中有一些错字-}和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>

如何使onClick一次执行多个类似功能？

3 个答案: