使用Javascript和HTML从表单输入更改图像

Change Image from Form Input with Javascript and HTML

本文关键字：输入图像表单 Javascript HTML 使用更新时间：2023-09-26

我想为游戏《我的世界》制作一个皮肤查看网站，我需要一个简单的表单，显示Minotar.net中的图像，然后在表单下显示输入的用户名及其图像/皮肤

表单应该在url的末尾添加用户名，例如：

提交的表单文本：缺口

更改：img src="https://minotar.net/skin/username"到img src="https://minotar.net/skin/Notch"并在表单下方显示图像。

--

我尝试的代码

      <div class="page-header">
        <h2>Enter a Minecraft Username to download skin:</h2>
      </div>
      <div class="input-group">
        <input type="text" id="page" class="form-control">
        <span class="input-group-btn">
          <input type="submit" value="Download Skin!" onclick="goToPage();" class="btn btn-success">
              <img id="page" src="http://minecraft-skin-viewer.com/skin.php?user=">
        </span>

Javascript：

function goToPage() { var page = document.getElementById('page').value; img.src = "http://minecraft-skin-viewer.com/skin.php?user=" + page }

JSfiddlehttp://jsfiddle.net/4dqbP/14/谢谢

哇，你刚刚启动JavaScript做得很好。我在你的代码中发现了一些错误，并在答案末尾的JSFiddle中进行了更正。以下是您的错误，供将来参考：

与类不同，id必须是唯一的。您有两个ID都命名为"page"。这不是有效的HTML，会导致错误。
您使用了img.src。这是允许的，但前提是img是一个变量。在小提琴中，我使用getElementById方法将img设为变量。
您应该关闭img标签和input标签。人们会说"关闭这些标签是什么意思？"好吧，为了保持一致性，并使XHTML更容易在以后学习，确保input标签看起来像这样是一个好习惯：

<input type="text" id="textbox1"/>

不是这个：

<input type="text" id="textbox2">（注意末尾缺少"/"。）

除此之外，我刚刚清理了一些格式。你可以走了！

使用Javascript和HTML从表单输入更改图像

Change Image from Form Input with Javascript and HTML

JSFiddle此处