Question

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

＆＃13;

<!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>

＆＃13;

Answer 1

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

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

请注意，'C:/Users/Akhil/Desktop/New folder/G.jpg'通常不是引用您图片的有效网址，因此您可能需要修复此问题。您可以在此处阅读以查看文件网址的工作原理：http://en.wikipedia.org/wiki/File_URI_scheme

而且，没有理由将两个空变量传递给imag()函数。你可以改变这个：

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

到此：

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

Answer 2

首先，您使用imag和c调用x函数，但代码并不了解它们。这就是你得到TypeError的原因。您应该为按钮的click事件创建一个事件处理程序，而不是此内联处理程序，您可以在x和c的值中传递任何您喜欢的内容。

检查此插件here

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

Answer 3

您的变量x和c未定义，其中没有任何内容，因此您的代码会中断。这是参数的工作方式，你给它们一个值并将它们传递给函数，所以c变成了'hello＆＃39;并且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;

}

}

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

Answer 4

试试这个：

<!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标准要求标签的引号标记＆＃39;内容。在它们之间切换允许您保持HTML标准。

希望这有帮助！

如何使用javascript显示图像

4 个答案: