Изменить текст метки с помощью 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.