javascript - 如何使用 JavaScript 更改基于 onclick 的文本?

标签 javascript html

大家晚上好!

好吧,我目前正在学习 JavaScript,我已经达到了我需要的程度,基于点击的文本(按钮,......我猜这并不重要)。

例如:

This message should be edited.

两个选择:ES - EN

如果选择“ES”选项,则:

This message has been edited to ES.

否则,如果单击/选择选项“EN”,则:

This message has been edited to EN.

我认为这可以通过脚本中的 if 来实现,但问题是如何告诉脚本选择了哪个选项,如果是“ES”或“EN”。

我有这个:

<p id="demo">This message should be edited.<p>
<a href="#" id="ES" onclick="func();">ES</a> - <a href="#" id="EN" onclick="func();">EN</a> - <a href="#" id="JP" onclick="func();">JP</a>

正如我所说,问题是我不知道如何告诉脚本已单击/选择的内容。

感谢您可能给我的任何帮助(如果可能的话,对解决方案的解释或解释会很棒,因为我想学习和理解,而不是在无法解决相同或类似问题的情况下解决这个问题一个 future )。

最佳答案

this 传递给您获取点击元素的函数。

然后使用innerHTML 将它的id 设置为您的p 标签.

参见示例

function func(ele){
    var demo = document.getElementById('demo');
    demo.innerHTML = "This message should be edited to "+ele.id+".";
}
<p id="demo">This message should be edited.<p>
<a href="#" id="ES" onclick="func(this);">ES</a> - <a href="#" id="EN" onclick="func(this);">EN</a> - <a href="#" id="JP" onclick="func(this);">JP</a>

关于javascript - 如何使用 JavaScript 更改基于 onclick 的文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44970545/

相关文章:

javascript - 选择 2 个 DIV 元素

html - 位置 : fixed caused element to be wider than browser

javascript - 评论展开/折叠不适用于评论 View 更多/更少

javascript - 如何在文本区域为空时删除元素?

html - 如何在较小的屏幕上将 div 移动到另一个 div

html - 如何使用 justify-content center 在 flexbox div 中将输入拉伸(stretch)到 100%

php - 在 codeigniter 中,出现 500 错误后重定向到自定义 html 页面

javascript - React 向下传递钩子(Hook)会导致重新渲染并失去对输入的关注

javascript - 如何在 JavaScript 中将字符串值包装在变量中

javascript - Three.js计算几何人脸面积(Face3)