#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>