Не удается получить формы JavaScript для доступа к значению и отправки оповещения

0

Я возился с формами, и я работал с JSfiddle, и я не мог заставить страницу вернуть предупреждение.

Вот мой HTML:

<form>
<input type="text" id="first"></input>
<input type="text" id="last"></input>
<input type="button" value="Submit" onClick="construct()"></input>
</form>

Вот мой JavaScript:

function construct() {
var firstName = document.getElementById("first").value;
var lastName = document.getElementById("last").value;
alert("Welcome to the party " + firstName + " " + lastName + "!");
}

И я не могу сказать, почему он не возвращает значение. Любая помощь приветствуется! О, и вот скрипка: http://jsfiddle.net/nickpalmer789/4DJ4e/1/ Спасибо!

Теги:
forms

3 ответа

1
Лучший ответ

Поскольку скрипт настроен для запуска onload, поэтому функция недоступна в глобальной области. Либо замените его на голову, либо на тело

Изображение 174551

или присоединить обработчик событий не навязчивым способом.

document.getElementsByTagName("button")[0].onclick = construct;
Поделиться
  • 0
    Можете ли вы объяснить, как это сделать, чтобы я мог сделать это в обычном файле JavaScript?
  • 0
    Объясните, как перейти в раскрывающийся список и выбрать другой вариант, как показано на рисунке выше?
Показать ещё 2 комментария
0

Вам нужно изменить onload (вверху слева), чтобы no wrap - in <head>. Вы вмешиваетесь в область видимости, поэтому construct() не объявляется в глобальной области (которую ищет атрибут onclick).

В противном случае объявите его как window.construct = function(){... }

В стороне, вы действительно должны держать разметку и javascript разделенными. то есть не использовать атрибуты on* для элементов, а вместо этого связывать их с javascript. Что-то вроде:

<!-- give n ID to the button -->
<input type="submit" value="Submit" id="submit-btn" />

<script>
  // grab the button (using the ID)
  var submitBtn = document.getElementById('submit-btn');
  // attach en event handler for click
  submitBtn.addEventListener('click', function(){
    // construct() code goes here
  });
</script>
Поделиться
  • 0
    Можете ли вы объяснить мне, в чем разница между всеми различными параметрами в этом меню?
  • 0
    @NickP: onLoad , onDomReady , no wrap - in <head> onDomReady no wrap - in <head> просто помещает его непосредственно в <head> документа, а no wrap - in <body> местах no wrap - in <body> внутри <body> .
0

construct определяется внутри другой функции, поэтому она не является глобальной и недоступна для внутренних атрибутов событий.

Не используйте внутренние атрибуты событий, привяжите обработчики событий к JS.

document.querySelector('input[type="button"]').addEventListener('click', construct);

Такие: http://jsfiddle.net/4DJ4e/3/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню