Пожалуйста, помогите мне с этим простым скриптом

Я только начал изучать собственный javascript, и я пытаюсь написать простой скрипт, который отобразит окно предупреждения, содержащее текст, содержащийся в каждом элементе <p></p>.Пожалуйста, помогите мне с этим простым скриптом

Я размещаю код ниже. Пожалуйста, дайте мне знать, что я делаю неправильно

function show(){ 
    var x = document.getElementsByTagName('p'); 
    for(i=0;i<x.length;i++) { 
    x[i].onclick=function(){ 
     alert(x[i].innerText); 
    } 
    } 
} 

show()

HTML ниже:

<p>Blackberry</p> 
<p>Strawberry</p> 
<p>Raspberry</p>

источник

2012-04-18 user976813

Первое, что я замечаю, что вы протечки глобальный 'i', который действительно плохо. Используйте 'var i'! Второе, что я замечаю, это то, что вы не упоминаете, что на самом деле происходит (ничего, ошибка и т. Д.) – ThiefMaster

Основная проблема заключается в том, что 'i' истекает в закрытие. – kirilloid

Большая проблема - это шоу, которое, вероятно, вызывается до того, как html отображается – mplungjan

Вы ссылки на неопределенный объект внутри обратного вызова, использование:

alert(this.innerText || this.textContent);

вместо .. .

Редактировать: как указано @Sarfraz проверьте свойства innerText или textContent, чтобы обеспечить совместимость между браузерами.

PS Проверьте также, что show(); вызывается, когда ссылка DOM загружен, а не до того;)

источник

2012-04-18 08:12:06 mamoo

Обратите внимание, что 'innerText' не является перекрестным браузером. Вы должны использовать 'innerHTML' или' innerText || textContent' – Sarfraz

Вам просто нужно позвонить шоу OnLoad - например

window.onload=show;

и изменить x[i] до this в onclick - innerText не поддерживается всеми браузерами

Я бы сделал это DEMO

window.onload=function(){ 
    var x = document.getElementsByTagName('p'); 
    for(var i=0;i<x.length;i++) { 
    x[i].onclick=function(){ 
     alert(this.innerHTML); // supported by more browsers than innerText 
    } 
    } 
}

источник

2012-04-18 08:13:14 mplungjan

Получил это, удалил мой комментарий, проверил, что он работает нормально, +1 :) – Sarfraz

Спасибо :) - обновил мою скрипту, чтобы использовать версию innerText/textContent – mplungjan

Вы должны обеспечить надлежащее определение масштабов i внутри функции.
Вам также необходимо использовать innerHTML вместо innerText.

function show() { 
    var x = document.getElementsByTagName('p'); 
    for (var i = 0; i < x.length; i++) { 
     (function(i) { 
      x[i].onclick = function() { 
       alert(x[i].innerHTML); 
      } 
     })(i); 
    } 
}

Поскольку внутри onclick обработчика this привязан к элементу, вы можете избежать проблемы с закрытием и i ALLtogether:

function show() { 
    var x = document.getElementsByTagName('p'); 
    for (var i = 0; i < x.length; i++) { 
     x[i].onclick = function() { 
      alert(this.innerHTML); 
     } 
    } 
}

источник

2012-04-18 08:13:28 ThiefMaster

, в чем необходимость()() в этом случае и почему не это? – mplungjan

Второе решение использует 'this'.В первом вызове функции необходимо избегать того, чтобы я всегда был последним значением, когда вызываемый вызов действительно вызывается. – ThiefMaster

Я думаю, вы использовали <script> тег в <head>. Это часто терпит неудачу, поскольку DOM не загружается полностью.

<html> 
<head> 
    <script> 
    function show(){....} 
    show(); // don't do this 
    </script> 
</head> 
<body> 
    <p>Blackberry</p> 
    <p>Strawberry</p> 
    <p>Raspberry</p> 
</body> 
</html>

Это лучше использовать window.onload = show; или window.addEventListener('load',show);.

Однако x[i] является локальной переменной. Это неизвестно вне шоу, даже в вашей анонимной функции. Поэтому вам нужно создать закрытие или использовать this.innerHTML.

Так или использовать

function show(){ 
    var el = document.getElementsByTagName('p'); 
    for(var i = 0; i < el.lenght; ++i){ 
     el[i].onclick = function(e){ 
      alert(this.innerHTML); 
     } 
    } 
} 
window.onload = show;

или

function show(){ 
    var el = document.getElementsByTagName('p'); 
    for(var i = 0; i < el.lenght; ++i){ 
     el[i].onclick = (function(element){ 
      return function(e){ 
       alert(element.innerHTML); 
      }; 
     })(el[i]); 
    } 
} 
window.onload = show;

Смотрите также:

источник

2012-04-18 08:13:52 Zeta

Переутомление? ОП является новичком. Зачем добавлять parms в onclick()() ??? – mplungjan

Что вам нужно, это замыкание, в противном случае любой <p>, при нажатии на что-нибудь, как после итерации не вернусь, i становится x.length + 1, таким образом, вы пытаетесь получить доступ к нонам элемента несуществующего при попытке сделать

x[i].innerText

Изменение кода:

function show(){ 

    var x = document.getElementsByTagName('p'); 

    for(var i=0;i<x.length;i++) { 
     x[i].onclick=function(i){ 
      return function() { 
       alert(x[i].innerHTML); // alternatively you can also do this.innerHTML without closure, I just wanna introduce you to this concept 
      } 
     }(i); 
    } 


} 

show()

http://jsfiddle.net/3xYtF/11/

Или, альтернативно, вы можете изменить x[i].innerText на this.innerText, не используя закрытие, но я вижу это как хорошую возможность представить концепцию закрытия :). Также, как указано в другом комментарии, .innerText на самом деле не является crossbrowser, используйте innerText || textContent

источник

2012-04-18 08:18:30

OP сказал: _ Я только начал изучать собственный javascript, и я пытаюсь написать простой скрипт - и мы закрываем его? – mplungjan

Добавлен отказ от ответственности ..: S, но я не вижу никаких проблем с представлением об этом на раннем этапе. Спасибо за ваше напоминание, хотя :) –

Проблема в том, что всякий раз, когда выполняется обработчик кликов, он всегда укажет на последнее значение i. Таким образом, любой элемент абзаца, который вы нажимаете на вас, всегда будет видеть «Малину» в соответствии с вашим примером.

Самый чистый способ исправить это, не используя какое-либо сложное закрытие (которое занимает память), заключается в использовании «этого», идентификатора контекста, который укажет на элемент, на который нажимается.

функция шоу() {

var x = document.getElementsByTagName('p'); 

for(i=0;i<x.length;i++){ 

    x[i].onclick=function(){ 

     alert(this.innerText); 

    } 

}

}

шоу()

источник

2012-04-18 08:25:56

Я думаю show() бежится перед тем страница полностью загружена. Попробуйте вызвать функцию из события onload и посмотрите, поможет ли это.

<body onload='show();'>

источник

2012-04-18 09:12:05 5arx

Пожалуйста, помогите мне с этим простым скриптом

ответ

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