Error trying to use getElementsByName in order to choose multiple "placeholders" (JavaScript)
This script of mine has a function, which is not working the way, I want it to. Take a look at the script, the function is called display_Value():
<html>
<he开发者_运维问答ad>
<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>
The functions noValue() and changeValue() makes the original value disappear on focus and come back if the field is empty on blue. That part works. When the button is clicked, the value in the text box is supposed to be displayed in the <span name="placeholder">-tags. That's not happening. The hidden text which is hidden with <div style="visibility:hidden"> is shown, as I want it to, but the value is not displayed. The form gets destroyed, just as I want to. Where have I made a mistake? :)
Ps.: If you are wondering what "Skriv dit navn her" means, it means "Write your name here" in danish.
EDIT
I isolated parts of the code once again. I found out, that if I replace getElementsByName("placeholder").innerHTML; with getElementById("placeholder").innerHTML; and assigns the first <span> with and ID="placeholder" the value is displayed in that particular <span>.This is, however, not exactly what I wanted. I wanted the value to be displayed in all 3 of the placeholders - how?
ANOTHER EDIT
I know it is possible to make this script work by assigning ID's to all of the placeholder; I'm not interested in that. I would like the function to display the value in all of the placeholders in as little text as possible and without repeating. I think this is called DRY / DIE :)
Replace your display_Value function with this:
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")
}
}
You were taking the value of the placeholder, not a reference to it. So the value wasn't going anywhere. You need to assign it directly to the innerHTML of the placeholder.
document.getElementById returns just one element. An Id is supposed to be unique and not repeated over three tags.
So you could give your 3 spans 3 different ids, and set the value with 3 different lines of javascript code.
Or, you could use something like jQuery and give your spans a class:
<span class="placeholder" />
then in jquery jou can set the html of all spans at once:
$("span.placeholder").html(value);
加载中,请稍侯......
精彩评论