Как заставить 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

В вашем коде есть несколько опечаток - неправильная позиция } и 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>

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