Question

我很抱歉，如果这是一个简单的问题，但我陷入困境：我想在按钮单击文本中的一个div框中加载不同的图片（一次只显示一个图像）。

我很确定我有语法错误，因为我是Javascript的新手，但无法找到适用于谷歌的答案。

function showByUrl(Url)
{
    document.getElementById("my-image").setAttribute('src', Url);
}

然后我有指定的div：

<div id="my-image" style="float:left; width:500px; margin-left:150px;margin-top:50px; ">

点击其中一个按钮：

<input type="button" id="buttonText" value="Joseph" onclick="showByUrl({Url:https://telebasel.ch/wp-content/uploads/2016/03/Josefskirche.jpg});"  />

我很感激帮助！谢谢大家！

Answer 1

您需要一个图像元素来显示图像：

<img id="my-image" style="float:left; width:500px; margin-left:150px;margin-top:50px; "/>

您不能将图像显示为div（将其视为分区，而不是容器），您需要在图像中使用它。查看here了解详情

Answer 2

有很多错误，试试这个：

function showByUrl(Url)
        {
            document.getElementById("my-image").setAttribute('src', Url);
        }

HTML：

    <img id="my-image" style="float:left; width:500px; margin-left:150px;margin-top:50px; " />
    And one of the buttons to click:

和

  <input type="button" id="buttonText" value="Joseph" onclick="showByUrl('https://telebasel.ch/wp-content/uploads/2016/03/Josefskirche.jpg');"  />

Answer 3

使用img代码而不是div
<input type="button" id="buttonText" value="Joseph" onclick="showByUrl('https://telebasel.ch/wp-content/uploads/2016/03/Josefskirche.jpg');" />

Answer 4

检查一下：

HTML：

<img id="my-image" style="float:left; width:500px; margin-left:150px;margin-top:50px; ">
<input type="button" id="buttonText" value="Joseph" onclick="showByUrl('https://telebasel.ch/wp-content/uploads/2016/03/Josefskirche.jpg')"  />

JavaScript的：

function showByUrl(Url){
    document.getElementById("my-image").setAttribute('src', Url);
};

JsFiffle上的工作代码： https://jsbin.com/mugeceguse/edit?html,js

Answer 5

使用

＆＃13;

showByUrl('https://telebasel.ch/wp-content/uploads/2016/03/Josefskirche.jpg');

＆＃13;

在调用该功能时也使用＆＃39; img＆＃39;标签而不是＆＃39; div＆＃39;用于加载图像

Answer 6

谢谢大家，结果是你的答案的组合！

我用的是img而不是div＆amp;我改为功能（＆＃39; http ..＆＃39;）

Answer 7

这将是一个使用jQuery的解决方案：

$("input").on('click', function(){
  $('<img src="https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png">').load(function() {
    $(this).appendTo('#my-image');
  });
});

https://jsfiddle.net/54vfuv4v/

按钮点击将不同的图片加载到一个<div>

7 个答案: