У этого моего скрипта есть функция, которая не работает так, как я хочу. Взгляните на скрипт, функция называется 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 .: Если вам интересно, что означает «Скрив дит навн ее», это означает «Напиши здесь свое имя» на датском языке.

РЕДАКТИРОВАТЬ

Я снова изолировал части кода. Я обнаружил, что если я заменю getElementsByName("placeholder").innerHTML; на getElementById("placeholder").innerHTML; и назначу первому <span> и ID = "placeholder", значение будет отображаться в этом конкретном <span>. Это правда, не совсем то, что я хотел. Я хотел, чтобы значение отображалось во всех трех заполнителях - как?

ДРУГОЕ РЕДАКТИРОВАНИЕ

Я знаю, что можно заставить этот скрипт работать, назначив идентификаторы всем заполнителям; Меня это не интересует. Я хотел бы, чтобы функция отображала значение во всех заполнителях как можно меньше текста и без повторения. Думаю, это называется DRY / DIE :)

1
Latze 10 Авг 2010 в 21:12

2 ответа

Лучший ответ

Замените свою функцию 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") 
    } 
} 

Вы использовали значение заполнителя, а не ссылку на него. Так что ценность никуда не делась. Вам нужно назначить его непосредственно на innerHTML заполнителя.

3
Fosco 10 Авг 2010 в 17:16

Document.getElementById возвращает только один элемент. Идентификатор должен быть уникальным и не повторяться в трех тегах.

Таким образом, вы можете дать своим 3 промежуткам 3 разных идентификатора и установить значение с помощью 3 разных строк кода javascript.

Или вы можете использовать что-то вроде jQuery и дать своим диапазонам класс:

<span class="placeholder" />

То в jquery jou можно установить html сразу для всех диапазонов:

$("span.placeholder").html(value);
1
Jan 10 Авг 2010 в 18:07