一键加载不同的图片<div>

On按钮点击。

我很抱歉，如果这是一个简单的问题，但我卡住了:我想加载不同的图片在一个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});"  />

我很感激你的帮助!谢谢各位!

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

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

您不能将图像显示为div(将其视为划分，而不是容器)，您需要在图像中显示它。点击这里查看更多信息

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

检查这个:

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

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

使用

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

在调用函数时使用'img'标签而不是'div'来加载图像

谢谢大家，最后是你们的答案的组合!

我用img代替div &我改成function('http..')

这是一个使用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/

有很多错误，试试这个:

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');"  />

相关内容

最新更新

热门标签：