Question

我想为Minecraft游戏创建一个皮肤查看网站，我需要一个简单的表格，显示来自Minotar.net的图像，然后在表格下显示输入的用户名及其图像/皮肤

表单应将用户名添加到网址的末尾，例如：

提交的表单文本：Notch

更改：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 }

JSfiddle http://jsfiddle.net/4dqbP/14/ 谢谢！

Answer 1

哇，你刚刚开始使用JavaScript做得很好。我在代码中发现了一些错误，并在答案结束时在JSFiddle中对其进行了更正。以下是您的错误，供将来参考：

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

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

不是这个：

<input type="text" id="textbox2"> （注意最后缺少的“/”。）

除此之外，我只是清理了一些格式。你很高兴去！

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

1 个答案:

JSFiddle Here