如何在Javascript按钮上添加文本+图像答案

【问题标题】：How to add text + images on Javascript button如何在Javascript按钮上添加文本+图像
【发布时间】：2017-06-11 10:15:41
【问题描述】：

我添加了一张图片，但现在我还想添加文字以及图片的标题“响应式”

<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()"/>

【问题讨论】：

标签： javascript image button heading

【解决方案1】：

您在“ducument.getElementById”上有错字，并且您没有任何以“text”为 id 的元素。将第 5 行更改为 document.getElementById("text").innerHTML = "<h2> Responsive </h2>"; 并在 html 部分的某处添加类似 <div id="text"></div> 的内容

【讨论】：

我添加了
但是当我点击按钮时它不会出现“响应式”。图片仍然显示没有文字
您是否也在第 5 行按文档更改了文档？

【解决方案2】：

在 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);

【讨论】：

我想添加文字和图片，这样当我点击按钮时，它会出现上面显示的文字和图片。
文本不存在，如果要显示文本，则需要创建一个新元素。