如何使用javascript显示图像

How to display image using javascript

本文关键字：显示图 图像 显示 javascript 何使用      更新时间：2023-09-26

如何使用javascript在html中显示与用户给定的输入（数字）一样多次的图像？我的代码中似乎有一个错误，不知道如何纠正。

<!DOCTYPE html>
<html>
<body>
<p>Click the button to add a new element to the array.</p>
<input type="number" id="myNumber" value="">
<button onclick="imag(c,x)">Try it</button>
<p id="demo"></p>
<script>
function imag(c,x) {
var x = document.getElementById("myNumber").value;
var c="<img src='C:/Users/Akhil/Desktop/New folder/G.jpg'/>";
    
  var arr = [];
  for (var i = 0; i < x; i++) {
    arr.push(c);
  
  document.getElementById("demo").innerHTML = arr;
}
}
</script>
</body>
</html>

试试这个：

<!DOCTYPE html>
<html>
<body>
<p>Click the button to add a new element to the array.</p>
<input type="number" id="myNumber" value="">
<button onclick="imag()">Try it</button>

<p id="demo"></p>
<script>
function imag() {
  var x = document.getElementById("myNumber").value;
  var c = ''<img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg"'/'>';
  var arr = [];
  for (var i = 0; i < x; i++) {
    arr.push(c);
    document.getElementById("demo").innerHTML = arr;
  }
}

</script>
</body>
</html>

注意，我刚刚将<button onclick="imag(c,x)">Try it</button>更改为<button onclick="imag()">Try it</button>；我把你的撇号换成了var c="<img src='C:/Users/Akhil/Desktop/New folder/G.jpg'/>";

您告诉javascript，imag（）应该得到两个变量。但您从未给函数实际的变量（而是在函数中填充它们）。所以我去掉了函数减速的变量。

我做的第二件事是更改引号和撇号，因为HTML标准要求标记内容使用引号。在它们之间切换可以保持HTML标准。

.innerHTML属性采用字符串。因此，您需要将数组转换为一个字符串，如下所示：

document.getElementById("demo").innerHTML = arr.join("");

请注意，'C:/Users/Akhil/Desktop/New folder/G.jpg'通常不是引用图像的有效URL，因此您可能也需要解决此问题。您可以阅读此处查看文件URL的工作方式：http://en.wikipedia.org/wiki/File_URI_scheme

并且，没有理由将两个空变量传递给imag()函数。您可以更改此项：

<button onclick="imag(c,x)">Try it</button>

到此：

<button onclick="imag()">Try it</button>

首先，使用c和x调用imag函数，但代码对它们一无所知。这就是为什么你会得到一个TypeError。您应该为按钮的点击事件创建一个事件处理程序，而不是这个内联处理程序，在这里您可以以x和c的值传递任何您喜欢的内容。

在这里检查这个按钮

最后，innerHTML属性接受一个字符串（HTML或纯文本）。但在这种情况下，它将连接所有值，逗号分隔，因为调用了数组的toString方法。此处参考

您的变量x和c是未定义的，其中没有任何内容，因此您的代码会中断。参数就是这样工作的，你给它们一个值，然后把它们传递给函数，所以c变成了"hello"，x变成了5，fiddle:

<p>Click the button to add a new element to the array.</p>
<input type="number" id="myNumber" value="">
<button onclick="imag('hello',5)">Try it</button>

<p id="demo"></p>

Javascript

function imag(c,x) {
  var arr = [];
  for (var i = 0; i < x; i++) {
    arr.push(c);
  document.getElementById("demo").innerHTML = arr;
}
}

但这不是很灵活，对吧？所以你的解决方案已经在其他答案中说明了。您不会在每次单击按钮时传入参数并在函数中生成变量，请停止使用内联调用。它真的很过时，很乱，也没必要！了解如何使用事件处理程序。

相关文章：