Question

单击我页面中的按钮时会调用此函数：

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”。到这里。” （从德语到英语），但事实并非如此。当单击时，它只是从屏幕上消失。

我做错了什么？

编辑：

该函数的调用方式如下：

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

这一切都适用于其他所有文本，但不适用于链接...

**********编辑2 ************ 我刚刚意识到firefox控制台说TypeError: document.getElementById(...) is null

尽管ID是正确的。这是我唯一要更改功能中的LINK的实例。通常它只是一个文本元素，因此必须与之连接...

Answer 1

您需要防止使用event.preventDefault

重新加载链接

like：

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。

Answer 2

原因可能是您的按钮属于“提交”类型，单击“提交”后，页面消失了。您可以使用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>

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

从脚本更改href的文本会使文本消失并且不会更改

3 个答案: