Fatal编程技术网

如何使用javascript显示图像

javascript html

如何使用javascript显示图像,javascript,html,Javascript,Html,如何使用javascript在html中显示与用户输入（数字）次数相同的图像？我的代码似乎有错误，不知道如何更正 单击按钮将新元素添加到数组中 试试看 函数imag（c，x）{ var x=document.getElementById（“myNumber”）.value； var c=“”； var-arr=[]； 对于（变量i=0；i

如何使用javascript在html中显示与用户输入（数字）次数相同的图像？我的代码似乎有错误，不知道如何更正


单击按钮将新元素添加到数组中

试试看


函数imag（c，x）{
var x=document.getElementById（“myNumber”）.value；
var c=“”；
var-arr=[]；
对于（变量i=0；i
.innerHTML
属性采用字符串。因此，您需要将数组转换为单个字符串，如下所示：

document.getElementById("demo").innerHTML = arr.join("");
请注意，
'C:/Users/Akhil/Desktop/New folder/G.jpg'
通常不是引用图像的有效URL，因此您可能也需要修复此问题。您可以阅读此处了解文件URL的工作原理：

而且，没有理由将两个空变量传递给
imag（）
函数。您可以更改此设置：

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

试试看
为此：

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

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

检查这个砰的一声

最后，innerHTML属性接受一个字符串（HTML或纯文本）。但在本例中，它将连接所有值，逗号分隔，因为调用了数组的
toString
方法。Reference

变量x和c未定义，其中没有任何内容，因此代码中断。这就是参数的工作原理，你给它们一个值，然后把它们传递给函数，这样c变成“hello”，x变成5，：

单击按钮将新元素添加到数组中

试试看
Javascript

function imag(c,x) {

  var arr = [];
  for (var i = 0; i < x; i++) {
    arr.push(c);

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

}

}

函数imag（c，x）{
var-arr=[]；
对于（变量i=0；i
但这不是很灵活，对吗？因此，您的解决方案已在其他答案中说明。您不会每次单击按钮时传入参数并在函数中生成变量，请使用内联调用停止。它真的过时了，凌乱了，没有必要！了解如何使用EventHandler。

尝试以下方法：

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


单击按钮将新元素添加到数组中

试试看


函数imag（）{
var x=document.getElementById（“myNumber”）.value；
变量c='\'；
var-arr=[]；
对于（变量i=0；i
请注意，我刚刚将
试用
更改为
试用
；我在这里切换了撇号：
var c=“”

您告诉javascript imag（）应该得到两个变量。但是你从来没有给函数实际的变量（你在函数中填充了它们）。所以我从函数的减速中删除了变量

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


希望这有帮助
 你犯了什么错误？什么不起作用？@Alex当我在文本框中输入一个数字并点击“尝试”按钮后，没有回应。什么都没有显示。代码正确吗？逻辑上和语法上都很好。成功了。谢谢还有一件事，是否可以在每个图像下方显示一个差异编号。在第一个图像“1”和第二个图像“2”下方？@mohit-是的，这是可能的。您必须创建正确的HTML才能进行显示。如果在自己尝试提出正确的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>