Question

所以，这是我在这里的第一篇文章，我对编码很新，所以请耐心等待。我试图从两个不同的文本框中获取用户输入，并在单击按钮后交织它们。因此，如果用户输入＆＃34; abcd＆＃34;在第一个文本框中＆＃34; 1234＆＃34;在第二个，结果将是＆＃34; a1b2c3d4＆＃34;在最后一个文本框中。这是我的代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <label>Enter Text Here:</label>
    <input id="userInput1" type="text" />
    <label>Enter Text Here:</label>
    <input id="userInput2" type="text" />
    <button id="myBTN" type="button">Try it</button>
    <label for="output">Result: </label><input id="output" type="text"/>
    <script type="text/javascript" src="jscript.js"></script>
</body>
</html>

我的Javascript：

var myButton = document.getElementById("myBTN");
myButton.addEventListener("click", merge);
function merge() {
  var a = document.getElementById("userInput1").value;
  var b = document.getElementById("userInput2").value;
  var aMod = a.split("");
  var bMod = b.split("");
  var c = ""
  for (i=0; i < aMod || i < bMod; i++)  {
    if (i < aMod)
    c += aMod[i];
    if (i < bMod)
    c += bMod[i];
  }
  return c;
  document.getElementbyId("output").value = "c";
}

我尝试执行时没有收到任何错误，但单击按钮时不会发生任何错误。任何帮助表示赞赏。

Answer 1

你的剧本存在一些问题，这对初学者来说很自然，所以不要灰心。

缺少分号

在您的Javascript的第8行，您不能用分号结束谎言。我相信这不是Javascript中的一个关键问题，但它确实是一种很好的做法。

缺少var

在for循环中，您使用变量i而不先声明它（var）。这意味着i在全局范围内声明，这可能导致意外行为。

将aMod和bMod视为整数，而不是数组

您的变量aMod和bMod是数组，而不是整数。要将它们与i进行比较，您需要比较它们的.length

您已经包含了一个违反计划流程的退货声明

如果您要返回稍后要使用的值，则只需要一个return语句。由于函数merge()将值c分配给其最后一行中的元素output，因此您不需要返回语句。

getElementById区分大小写

在最后一行中，您写了getElementbyId而不是getElementById（请注意字母B）

您正在分配值＆＃34; c＆＃34;不是变量c

同样在最后一行中，您将分配字符串值＆＃34; c＆＃34;到您的元素output，而不是变量c。

总之，此代码演示了上述更改：

var myButton = document.getElementById("myBTN");
myButton.addEventListener("click", merge);
function merge() {
    var a = document.getElementById("userInput1").value;
    var b = document.getElementById("userInput2").value;
    var aMod = a.split("");
    var bMod = b.split("");
    var c = "";
    for (var i = 0; i < Math.max(aMod.length, bMod.length); i++)  {
        if (i < aMod.length)
            c += aMod[i];
        if (i < bMod.length)
            c += bMod[i];
    }

    document.getElementById("output").value = c;
}

Answer 2

您可以使用split()和length来提供所需的输出，而不是使用charAt()并处理数组。

var myButton = document.getElementById("myBTN");
myButton.addEventListener("click", function() {
  let a = document.getElementById("userInput1").value;
  let b = document.getElementById("userInput2").value;  
  let aLength = a.length;
  let bLength = b.length;
  let maxLength = Math.max(aLength,bLength);
  let c = ""
  for (let i=0; i < maxLength; i++)  {
    c += a.charAt(i);
    c += b.charAt(i);
  }
  document.getElementById("output").value = c;
});

<label>Enter Text Here:</label>
    <input id="userInput1" type="text" />
    <label>Enter Text Here:</label>
    <input id="userInput2" type="text" />
    <button id="myBTN" type="button">Try it</button>
    <label for="output">Result: </label><input id="output" type="text"/>

如何使用Javascript交织来自文本框的输入

2 个答案: