HTML DOM Javascript not working?

HTML DOM Javascript not working?

本文关键字：working not Javascript DOM HTML      更新时间：2023-09-26

我有一个下拉菜单，当单击它时，可以成功更改图像的缩略图。但是，我还需要更改<p>文本。我看了看W3Schools，但还是无济于事。这是我的密码。

<p id="caption"></p>
<select name="woodType" id="woodType" onChange="changeThumbnail();changeCaption(this);">
<script>
    function changeCaption(selTag) {
        var caption = selTag.options[selTag.selectedIndex].text;
        document.getElementById("caption").text = "Wood: " + caption;
    }
</script>

文本不会更改。

尝试以下操作：

 <script>
     function changeCaption(selTag) {
         var caption = selTag.value;
         document.getElementById("caption").innerHTML = "Wood: " + caption;
     }
 </script>

您应该使用innerHTML属性来设置或返回<p>元素的文本。

.text是option元素的属性，而不是p。要设置p文本，您应该使用.innerHTML，

function changeCaption(selTag) {
    var caption = selTag.options[selTag.selectedIndex].text;
    document.getElementById("caption").innerHTML = "Wood: " + caption;
}

演示

document.getElementById返回对DOM元素的引用。您可以想出几个可以在Element对象上使用的候选者，即textContent、innerHTML和innerText（不适用于Firefox）

如果你阅读了这里的文章和developer.mozilla.org上的文档，你会注意到使用textContent比使用innerHTML更好地满足你的需求。

在针对innerHTML的Mozilla文档中，出于安全考虑，它说，

建议您在插入纯文本时不要使用innerHTML；相反，使用node.textContent。这不会解释传递的内容作为HTML，但将其作为原始文本插入。

相关文章：