Home/ Questions/Q 991043
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T06:02:36+00:00

This script of mine has a function, which is not working the way, I

  • 0

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>

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

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 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0