Изменение входного значения с помощью javascript - что пошло не так?

У меня есть текст с полем ввода. Я хочу, чтобы поле начиналось как пустое, и при нажатии на него вводите текст ввода в правильное значение (например, в поле "имя").

Если я так делаю, он отлично работает:

Buy  <input type="text" name="eggs" onclick="this.value=this.name;"> tomorrow.

Однако, если я попытаюсь очистить DOM и переместить функцию в отдельный файл javascript, она перестанет работать:

HTML:

Buy <input type="text" name="eggs" onclick="showname(this);"> tomorrow.

JS:

function showname(el) {
     el.value = el.name;
}

function showname(el){
    el.value = el.name;
}
.closeform{
    width: 70px;
}

.closeform input {
    width: 70px;
}

.closeform button {
    width: 70px;
}
Buy
<span class="closeform">
    <input type="text" name="eggs" onclick="showname(this);"> 
 </span> 
    tomorrow.

Я очень новичок в Javascript - чего мне здесь не хватает?

+1
источник поделиться
2 ответа

Вы говорите в своем вопросе:

Однако, если я попытаюсь очистить DOM и переместить функцию в отдельный файл javascript, она перестанет работать

Скажем, у вас есть 2 фактических файла в одной папке:

  • Содержимое myscript.js:

    function showname(el) { el.value = el.name; }
    
  • Содержание index.html:

    <!DOCTYPE html>
    <html><head><title>Demo</title>
      <script src="myscript.js"></script>
    </head><body>
      Buy <input type="text" name="eggs" onclick="showname(this);"> tomorrow.
    </body></html>
    

    ИЛИ

    <!DOCTYPE html>
    <html><head><title>Demo</title>
    </head><body>
      Buy <input type="text" name="eggs" onclick="showname(this);"> tomorrow.
      <script src="myscript.js"></script>
    </body></html>
    

Это должно работать отлично...


Однако в комментариях вы говорите:

Я попробовал это с помощью Fiddle - может быть, проблема в интерфейсе Fiddle.

Вот где ваша проблема была...

В jsfiddle нет отдельного javascript файла.
Три кодовых блока (html, js, css) объединяются в один файл.
Щелкните правой кнопкой мыши окно результатов в jsfiddle и посмотрите на сгенерированный файл.
Затем обратите внимание на параметры (правый верхний угол) от jsfiddle: по умолчанию код заверяется в onload-метод (в соответствии с выбранной вами библиотекой или window.onload, если вы не используете библиотеку).

Однако вы можете поместить сценарий в голову или тело, тем самым не обертывая свой код внутри области функций (которая затем закрывается поверх содержащихся идентификаторов).
См. Http://jsfiddle.net/wf55a5qb/ для рабочего примера.

Причина, по которой ваш пример stack-snippet работал здесь, в StackOverflow, заключается в том, что редактор snippet не обертывает блок кода javascript функцией (onload-like) (когда он объединяет три блока кода).

Сказав это и объяснив это, я рекомендую вам устанавливать свои события (используя obj.addEventListener/obj.attachEvent или прямой elm.onevent) из сценария /a после того, как элементы (которые ваш скрипт манипулирует, помещает скрипт в качестве последнего элемента html-body) или страница (с помощью window.onload/etc).

Я разместил это, чтобы выяснить, что на самом деле пошло не так, поэтому вы не делаете ложные модели в своей статье о том, как работает javascript (например, "внешний скрипт работает в собственной области", который никто не утверждал, но может быть предположением, которое вы могли бы сделать), все еще изучая это!

+1
источник

Все в JavaScript имеет объем. Когда вы определяете свою функцию, она не видна на input поэтому вход не знает, что функция существует. Вы можете использовать window чтобы сделать функцию видимой для него:

<input type="text" name="eggs" onclick="window.showname(this);"/> 

window.showname = function (el)

скрипка

Однако я не рекомендую глобальные функции. Итак, что еще?


Вы можете использовать функцию onclick в JavaScript. Чтобы найти элементы в JavaScript, вы используете селекторы. Я использую getElementById() это получит элемент по id. Список селекторов здесь
<input id="my_input" type="text" name="eggs"/>

Затем в JavaScript:

document.getElementById('my_input').onclick = function () {
    //Use this to refer to the element
    this.value = this.name;
};

скрипка


При этом. Убедитесь, что весь ваш код завернут в window.onload. Это позволит убедиться, что код запускается в нужное время:

window.onload = function () {
    //Your code
};

JSFiddle автоматически помещает ваш код в это.

+1
источник

Посмотрите другие вопросы по меткам или Задайте вопрос