根据 ID 使用 javascript 更改 html 网页上的图像

Change an image on a html web page using javascript depending on an ID

本文关键字：网页 图像 html 更改 ID 使用 javascript 根据      更新时间：2023-09-26

我对JavaScript相当陌生，我正在尝试显示一个图像，该图像会根据用户输入的ID而变化。

下面我声明了一个变量"icon"来存储url的值+图标id + .png来完成url：

icon = "http://ddragon.leagueoflegends.com/cdn/6.2.1/img/profileicon/" + summonerIcon + ".png"

此变量可能包含的内容的一个示例是："http://ddragon.leagueoflegends.com/cdn/6.2.1/img/profileicon/14.png"

我想使用此变量中的信息显示在我的 html 页面上，因此当用户输入用户名时，javascript 应该返回与用户提交的 ID 匹配的图像。

这些图像都存储在上面显示的网址上，它们不存储在本地。

感谢您阅读我的问题。

使用 jQuery 挂钩到输入上的更改事件，该事件将指示 ID，然后将值拉入图标变量中。

.HTML

<input type="text" name="userid" id="id />

.JS

function getVals() {
  var icon = $( "#id" ).val();
}
$( "input" ).change( getVals );
getVals();

您必须调整getVals函数以重新渲染您正在显示的图像，但这应该为您指明正确的方向。

这使用 jquery 插件。

<script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#btnLoad').click(function(e){
            var baseUrl ='http://ddragon.leagueoflegends.com/cdn/6.2.1/img/profileicon/';
            $('#iconHolder').attr('src', baseUrl + $('#iconId').val() + '.png');
        });
    });
</script>
Icon Id <input id="iconId" /><button id="btnLoad">Load</button>
<br/>
<img id="iconHolder" />
相关文章：