我试图使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>