我的这个脚本有一个功能，但它不按我想要的方式工作。看一下脚本，函数名为 display_Value():
<html>
<head>
<title>JavaScript</title>
<!--Scripts-->
<script type="text/javascript">
<!--
function noValue(id) {
var _value = document.getElementById(id).value;
if (_value == "Skriv dit navn her") {
document.getElementById(id).value='';
}
}
function changeValue(id) {
var _value = document.getElementById(id).value;
if (_value == "") {
document.getElementById(id).value='Skriv dit navn her';
}
}
function display_Value() {
var val = document.getElementById("txt").value;
if (val != "Skriv dit navn her" && val != "") {
document.getElementsByName("placeholder").innerHTML = val;
document.getElementById("hidden").style.visibility="visible";
destroy("destroy")
}
}
function destroy(id) {
var d = document.getElementById(id);
d.parentNode.removeChild(d);
}
//-->
</script>
</head>
<body>
<div id="destroy">
<input type="text" id="txt" value="Skriv dit navn her" onFocus="noValue('txt')" onBlur="changeValue('txt')">
<input type="button" onClick="display_Value()" value="Click me" />
</div>
<div id="hidden" style="visibility: hidden">
<p>Hello. Your entered value is: <span name="placeholder"></span> and it is repeated below</p>
<span name="placeholder"></span>
<span name="placeholder"></span>
</div>
函数 noValue() 和 changeValue() 使原始值在焦点上消失，如果字段为空则返回蓝色。那部分有效。单击按钮时，文本框中的值应该显示在 <span name="placeholder"> 中。 -标签。那没有发生。用<div style="visibility:hidden">隐藏的隐藏文本如我所愿，已显示，但未显示该值。表格被破坏了，就像我想的那样。我哪里做错了？ :)
Ps.: 如果您想知道“Skriv dit navn her”是什么意思，丹麦语的意思是“在这里写下您的名字”。
编辑
我再次分离了部分代码。我发现，如果我更换 getElementsByName("placeholder").innerHTML;与 getElementById("placeholder").innerHTML;并分配第一个 <span>使用 ID="placeholder"，值显示在该特定的 <span> 中.然而，这并不是我想要的。我希望值显示在所有 3 个占位符中 - 怎么做？
另一个编辑
我知道可以通过为所有占位符分配 ID 来使这个脚本工作；我对此不感兴趣。我希望该函数以尽可能少的文本显示所有占位符中的值并且不重复。我认为这叫做 DRY/DIE :)
最佳答案
将您的 display_Value 函数替换为:
function display_Value() {
var val = document.getElementById("txt").value;
if (val != "Skriv dit navn her" && val != "") {
document.getElementsByName("placeholder").innerHTML = val;
document.getElementById("hidden").style.visibility="visible";
destroy("destroy")
}
}
您正在获取占位符的值，而不是对其的引用。所以值(value)不会消失。您需要将其直接分配给占位符的 innerHTML。
关于javascript - 尝试使用 getElementsByName 以选择多个 "placeholders"(JavaScript) 时出错，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3451554/