Question

代码之前正在运行，在代码中更改了一些内容然后按Ctrl + Z将其恢复到原始状态，然后它停止工作。我很确定我把它恢复到原来的状态。帮助我Stackoverflow，你是我唯一的希望。

我从一些输入开始：

<div class="inputField_1">
<input id="urlInput" type="text"/>
<br>
<input type="submit" onclick="getURL()"></input>
</div>

然后我写了代码：

var urlInput = $("#urlInput").val();

var img = new Image();
img.src = urlInput

var width = img.width;
var height = img.height;

function getURL() {
    $(".aboutTitleWrap").append("<p>This image has: " + width * height + " pixels</p>");
};

目的是让用户输入图像URL，Javascript来获取图像的宽度和高度，然后将它们相乘以获得像素数。不确定我做错了什么......

编辑：我认为重要的是要注意，我得到的输出是＆＃34;此图片有：0像素＆＃34;

Edit2：对不起，伙计们，我是新人，因此完全不喜欢Javascript。无论如何，谢谢你的帮助。

Answer 1

有很多事情非常错误。我为你做了一个工作实例here。

首先：你的HTML错了。我修好了。

<div class="inputField_1">
    <input id="urlInput" type="text"/>
    <br/>
    <input type="submit" id="button" />
</div>
<span class="aboutTitleWrap"></span>

第二：始终将逻辑和布局分开。将点击处理程序放在JavaScript中。

第三：JavaScript不会等到图像加载完毕。因此，当图像准备好时，我们需要一个onload处理程序来触发。对于指出这一点的人来说，这是指六个人。

$("#button").click(function() {
    var img = new Image();
    img.src = $("#urlInput").val();
    img.onload = function(){
         $(".aboutTitleWrap").html("<p>This image has: " + img.width*img.height + " pixels</p>");
    }
});

Answer 2

更正您的输入，</input>不存在：

<input type="submit" onclick="getURL()">

你可以这样做你想做的事：

HTML：

<div class="inputField_1">
    <input id="urlInput" type="text"/><br>
    <input type="submit" id="submitUrl"/>
</div>

<div class="aboutTitleWrap"></div>

JQUERY：

$("#submitUrl").on("click", function(){
    var urlInput = $("#urlInput").val();
    var img = new Image();
    img.src = urlInput

    var width = img.width;
    var height = img.height;
    $(".aboutTitleWrap").append("<p>This image has: " + width*height + " pixels</p>");
});

JSFIDDLE：http://jsfiddle.net/ghorg12110/8m55r3xq/1/

Answer 3

你在第4行遗漏了一个半结肠。

img.src = urlInput

使用一些Javascript，之前工作，更改它，Ctrl + Z＆＃39;它停止工作

3 个答案: