在一些Javascript上工作，以前工作过，改变了它，Ctrl + Z恢复了它，停止工作

Working on some Javascript, worked before, changed it, Ctrl+Z'ed it back, stopped working

本文关键字：工作 Ctrl 停止工作 恢复 改变 Javascript      更新时间：2023-09-26

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

我从一些输入开始：

<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得到图像的宽度和高度，然后将它们相乘得到像素数。不知道我做错了什么...

编辑：我想重要的是要注意，我得到的输出是"此图像具有：0像素"

编辑2：对不起，伙计们，我是新来的，因此在Javascript上完全是狗屎。无论如何，感谢您的帮助。

有很多非常非常错误的事情。我在这里给你做了一个工作的例子。

首先：你的html是错误的。我修好了。

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

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

第三：JavaScript 不会等到图像加载完毕。因此，我们需要一个加载处理程序在映像准备就绪时触发。感谢六指男子指出这一点。

$("#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>");
    }
});

更正您的输入，</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/

第 4 行缺少分号。

img.src = urlInput
相关文章：