如何在 Javascript 按钮上添加文字 + 图片

Question

我已经添加了一张图片，但现在我还想添加文字以及图片的标题"Responsive"

<script>
function pic1()
    {
        document.getElementById("img").src = "../raining.gif";
        ducument.getElementById("text").innerHTML = "<h2> Responsive </h2>";
    }
function pic2()
    {
        document.getElementById("img").src ="../movingpiston.gif";
    } 
    </script>

<img src = "" id = "img"/> 
<input type="button" value="Responsive" onclick="pic1()"/> 
<input type="button" value="Reconfiguration" onclick="pic2()"/>

Answer 1

在ducument.getElementById("text")中，id"text"在哪里？你想给 img 添加一个标题吗，当悬停在图片上时它会显示它的标题。

文本不存在，如果要显示文本，需要创建一个新元素。

        var img = document.getElementById("img");
        img.setAttribute("src","../raining.gif")
        var title = document.createElement("h2");
        title.innerHTML = "Responsive";
        img.parentNode.appendChild(title);

Answer 2

您在 "ducument.getElementById" 上有错别字，并且您没有任何以 "text" 作为 ID 的元素。将第 5 行更改为 document.getElementById("text").innerHTML = "<h2> Responsive </h2>"; 并在 html 部分

的某处添加类似 <div id="text"></div> 的内容

如何在 Javascript 按钮上添加文字 + 图片

How to add text + images on Javascript button

javascript

image

button

heading