Изменить текст метки с помощью JavaScript


93

Почему у меня не работает следующее?

<script>
    document.getElementById('lbltipAddedComment').innerHTML = 'Your tip has been submitted!';
</script>
<label id="lbltipAddedComment"></label>

1
ой! извините, что должно быть 'не'; 0
Фил Кроу

4
Потому что, когда вы скриптом пытаетесь изменить метку innerHtml, lbltipAddedComment фактически отсутствует на странице. Вставьте скрипт после метки или используйте jquery $ (document) .ready ()
Эндрю Орсич

извините, не увидел кнопку редактирования!
Фил Кроу

Я пробовал все, что предлагалось здесь, но у меня ничего не работало.
Раджан Мишра

Ответы:


140

Потому что ваш скрипт запускается ДО того, как метка существует на странице (в DOM). Либо поместите сценарий после метки, либо подождите, пока документ полностью загрузится (используйте функцию OnLoad, такую ​​как jQuery ready()или http://www.webreference.com/programming/javascript/onloads/ )

Это не сработает:

<script>
  document.getElementById('lbltipAddedComment').innerHTML = 'your tip has been submitted!';
</script>
<label id="lbltipAddedComment">test</label>

Это будет работать:

<label id="lbltipAddedComment">test</label>
<script>
  document.getElementById('lbltipAddedComment').innerHTML = 'your tip has been submitted!';
</script>

В этом примере (ссылка jsfiddle) поддерживается порядок (сначала скрипт, затем метка) и используется onLoad:

<label id="lbltipAddedComment">test</label>
<script>
function addLoadEvent(func) {  
      var oldonload = window.onload;  
      if (typeof window.onload != 'function') {  
        window.onload = func;  
      } else {  
        window.onload = function() {  
          if (oldonload) {  
            oldonload();  
          }  
          func();  
        }  
      }  
    }  

   addLoadEvent(function() {  
document.getElementById('lbltipAddedComment').innerHTML = 'your tip has been submitted!';

    });  
</script>

Я думаю, что .textContent ответ на самом деле правильный
Пол Тейлор

1
Что ж, @PaulTaylor, этот ответ здесь с 2010 года и получил 92 положительных голоса (а теперь и ваш отрицательный). В вопросе использовался innerHTML, поэтому я изменил только то, что было необходимо для его кода. Хотя я считаю, что всегда нормально предлагать дополнительные идеи («эй, кстати, используйте textcontent вместо innerhtml / innertext), это не было проблемой OP ... Нет необходимости отрицать».
Konerak

Хорошо, но он когда-либо работал, его последний комментарий заключался в том, что ничего не работает, поэтому я понял, что ваше решение не сработало, определенно не сработало для меня, похоже, что jsfiddle.net/cfxrLpe9/4 работает с textContent, но не с внутренним тот ?
Пол Тейлор

@PaulTaylor Ответ, вероятно, сработал для OP, поскольку он отметил этот ответ как принятый. У вас опечатка в вашем коде. Как показывает ответ, вы используете innerHtml вместо innerHTML. jsfiddle.net/cfxrLpe9/6
Randall Flagg

22

Вы пробовали .innerTextили .valueвместо .innerHTML?


.innerText работает для метки. У меня есть тег Script в <Head> и дизайн в <body>. Хотя у меня все работает нормально.
Jai

@AshwinG Ваш комментарий только что спас меня. Я избивал мою голову .valueзаlabel
Prabs

Попробуйте использовать.text('Your Text')
подлый

15

Поскольку элемент метки не загружается при выполнении скрипта. Поменяйте местами метку и элементы скрипта, и все заработает:

<label id="lbltipAddedComment"></label>
<script>
    document.getElementById('lbltipAddedComment').innerHTML = 'Your tip has been submitted!';
</script>

1
Ой, не заметил этого! Да, если опубликованный код отражает реальный код (не использует jquery для запуска document.ready или аналогичного), то это причина, по которой он также не будет работать.
GordonM

10

.textContentВместо этого используйте .

Я тоже боролся с изменением значения метки, пока не попробовал это.

Если это не помогло, попробуйте проверить объект, чтобы увидеть, какие свойства вы можете установить, зарегистрировав его в консоли, console.dirкак показано в следующем вопросе: Как я могу зарегистрировать HTML-элемент как объект JavaScript?


Спасибо. Я подозреваю (но не получил точного подтверждения), что мой вариант использования аналогичен варианту использования в вопросе: я пытался получить и / или изменить текст метки, имеющей вложенный элемент ввода, например, я хотел получить и / или изменить "enter info here:"часть следующего: <label id='myLabel'>enter info here:<input type='text' id='inp'/></label>. Только .textContentработало, и ни одно .innerHTML, .innerTextни .valueработало. (Отказ от ответственности: я проверял только в Chrome.)
Эндрю Виллемс

Спасибо, я столкнулся с той же проблемой
Пол Тейлор,

2
@AndrewWillems, к сожалению, .textContentи .innerText(хотя это нормально для чтения) не работал для моего firefox60 для записи (он также удалил встроенное поле ввода, как и .innerHTML). Так что мне пришлось прибегнуть к document.getElementById('myLabel').childNodes[0].nodeValue="new label text"(конечно, index может быть чем-то другим, кроме 0, что делает немного запутанным, но сработало для меня)
Matija Nalis

9

Использование .innerTextдолжно работать.

document.getElementById('lbltipAddedComment').innerText = 'your tip has been submitted!';


0

Попробуй это:

<label id="lbltipAddedComment"></label>
<script type="text/javascript"> 
      document.getElementById('<%= lbltipAddedComment.ClientID %>').innerHTML = 'your tip has been submitted!';
</script>

1
Ссылка на решение приветствуется, но убедитесь, что ваш ответ полезен и без нее: добавьте контекст вокруг ссылки, чтобы ваши друзья-пользователи имели некоторое представление, что это такое и почему оно есть, а затем процитируйте наиболее релевантную часть страницы, которую вы повторная ссылка на, если целевая страница недоступна. Ответы, которые представляют собой не более чем ссылку, могут быть удалены.
paper1111

0

Потому что скрипт будет выполнен первым ... Когда скрипт будет выполнен, в это время элементы управления не загружаются. Итак, после загрузки элементов управления вы пишете сценарий.

Это сработает.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.