2014-10-23 5 views
0

Следующая программа должна всплывающее окно предупреждения при нажатии на «First», когда он работает в браузереJavascript окно предупреждения не работает

<!doctype html> 

<html lang="en"> 

<head> 
     <meta charset="utf-8"/> 

     <script src="attach.js"> </script> 
</head> 

<body> 
    <div id="wrap"> 
       <p id="1a"> First </p> 
       <p id="2b"> Second </p> 
       <p id="3c"> Third </p> 
       <p id="4d"> Fourth </p> 
    </div> 

</body> 
</html> 

Файл attach.js является:

function getit() 
{ 
     document.querySelector('#1a').onclick=fun2; 
     document.write('Hi'); 
} 

function fun2() 
{ 
     alert('Yup!'); 
} 

document.write('here'); 
window.onload=getit; 

выход я в хроме есть:

here 
First 
Second 
Third 
Fourth 

проблема заключается в том, что при нажатии кнопки «First», в окне браузера, там я s no alert box с надписью «Yo». Другой вопрос - почему мы не видим на экране «Привет».

+0

'Другой вопрос, почему мы не делаем см. «Привет» на экране. 'потому что страница уже загружена. Невозможно «document.write». И id не может начинаться с номера. – Cheery

+0

Я получаю сообщение об ошибке, что «# 1a» не является допустимым селектором в хроме. – griegs

+0

Изменены имена для a, b, c, d (и внесены изменения в .js-файл), все еще не получая окно предупреждения! –

ответ

0

Проблема с JS является то, что он имеет «1» в ID, который должен быть экранированы с кодом Unicode для querySelector, чтобы работать правильно. Кроме того, необходимо удалить document.write ('Привет') как она будет перезаписана HTML

Попробуйте

function getit() { 
    document.querySelector('#\\31 a').onclick = fun2 
} 

Plunker: http://plnkr.co/edit/ShUF3LzguShG4OlzrWQZ?p=preview

+0

Спасибо большое, сейчас он работает! –

0

О единственном, что я изменил, было имя 1a на aTest. Работал после этого.

<!doctype html> 

<html lang="en"> 

<head> 
     <meta charset="utf-8"/> 

</head> 

<body> 
    <div id="wrap"> 
       <div id="aTest" class="1a"> First </div> 
       <p id="2b"> Second </p> 
       <p id="3c"> Third </p> 
       <p id="4d"> Fourth </p> 
    </div> 

     <script> 
      function getit() 
      { 
       var a = document.querySelector('#aTest'); 
       a.onclick = fun2; 
       //document.write('Hi'); 
      } 

      function fun2() 
      { 
        alert('Yup!'); 
      } 

      document.write('here'); 
      window.onload = getit; 
     </script>  
</body> 
</html> 
0

Почему бы не использовать jQuery для достижения того же результата.

$(document).on('click','#1a',function(){ 
    fun2(); 
    console.log('hey'); 
}) 

function fun2(){ 
    alert('Yup!'); 
} 
+0

Да, это была бы лучшая идея – griegs

Смежные вопросы