Блог

Главная - Вопросы по программированию - Изменение текста href из скрипта приводит к исчезновению текста, а не к изменению

Изменение текста href из скрипта приводит к исчезновению текста, а не к изменению

#javascript #html

#javascript #HTML

Вопрос:

Эта функция вызывается при нажатии кнопки на моей странице:

 function LoadEnglishText()
{
    document.getElementById("txt_whatwedo_learnmore2").innerHTML = "here."; 
}

Это соответствующий HTML:

 <a id="txt_whatwedo_learnmore2" href="./pdf/Pricing_App_Dev_2019_Ger.pdf">hier.</a>

Итак, при запуске функции текст ссылки должен измениться с «hier.» на «here.» (с немецкого на английский), но этого не происходит. При нажатии на него он просто исчезает с экрана.

Что я делаю не так?

Редактировать:

Функция вызывается следующим образом:

         <a href="#" onclick="LoadEnglishText()"> <img src="./img/img_english.png" width=3%</img></a>

Все это работает с любым другим текстом, но не со ссылкой…

********** РЕДАКТИРОВАТЬ 2************ Я только что понял, что консоль firefox говорит, что TypeError: document.getElementById(...) is null

несмотря на то, что идентификатор правильный. Это единственный случай, когда я пытаюсь изменить ССЫЛКУ в функции. Обычно это просто текстовый элемент, поэтому он должен быть подключен к этому…

Комментарии:

1. Где вы вызываете функцию ? Добавьте соответствующий код в справку

2. это работает. Где привязка щелчка? Если он указан в a теге, вам нужно будет запретить действие по умолчанию при переходе по ссылке

3. Пожалуйста, включите кнопку в вопрос.

Ответ №1:

Причина может заключаться в том, что ваша кнопка имеет тип submit, при нажатии на которую отправляется from и страница исчезает. Вы можете либо запретить событие по умолчанию, используя Event.preventDefault() , либо указать тип кнопки как button .

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

 function LoadEnglishText(e){
  document.getElementById("txt_whatwedo_learnmore2").textContent = "here."; 
}  
 <a id="txt_whatwedo_learnmore2" href="./pdf/Pricing_App_Dev_2019_Ger.pdf">hier.</a>

<button type="button" onclick="LoadEnglishText()">Change Text</button>

Использование Event.preventDefault() 

 function LoadEnglishText(e){
  document.getElementById("txt_whatwedo_learnmore2").textContent = "here."; 
  e.preventDefault();
}  
 <a id="txt_whatwedo_learnmore2" href="./pdf/Pricing_App_Dev_2019_Ger.pdf">hier.</a>

<button onclick="LoadEnglishText(event)">Change Text</button>

Ответ №2:

Вам необходимо предотвратить перезагрузку ссылки с помощью event.preventDefault

Нравится : 

 function LoadEnglishText(e) {
  e.preventDefault();
  document.getElementById("txt_whatwedo_learnmore2").innerText = "here."; 
}
  
 <a href="#" onclick="LoadEnglishText(event)"> <img src="./img/img_english.png"></img></a>

Примечание: используйте .innerText , если вы вводите только текст.

Ответ №3:

Вам нужно вызвать функцию, используя круглые скобки() onclick="LoadEnglishText()" .

Рабочая демонстрация:

 function LoadEnglishText(e) {
  e.preventDefault();
  document.getElementById("txt_whatwedo_learnmore2").innerHTML = "here.";
}  
 <a id="txt_whatwedo_learnmore2" onclick="LoadEnglishText(event)">hier.</a>