我试图使Button onClick填充两个#box元素,并使用来自表单的相同输入。并可能在将来添加更多的盒子。但这似乎只是在调用前两个函数。

这是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>

最佳答案

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

10-01 16:36
查看更多