Изменить текст метки с помощью 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!';
Шилпа
источник
7

Вот еще один способ изменить текст метки с помощью jQuery:

<script>
  $("#lbltipAddedComment").text("your tip has been submitted!");
</script>

Проверьте пример JsFiddle

мустафа мехатрия
источник
0

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

<label id="lbltipAddedComment"></label>
<script type="text/javascript"> 
      document.getElementById('<%= lbltipAddedComment.ClientID %>').innerHTML = 'your tip has been submitted!';
</script>
user1611219
источник
1
Ссылка на решение приветствуется, но убедитесь, что ваш ответ полезен и без нее: добавьте контекст вокруг ссылки, чтобы ваши друзья-пользователи имели некоторое представление, что это такое и почему оно есть, а затем процитируйте наиболее релевантную часть страницы, которую вы повторная ссылка на, если целевая страница недоступна. Ответы, которые представляют собой не более чем ссылку, могут быть удалены.
paper1111
0

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

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

Рачана
источник