如何使用Javascript从文本框中交织输入_Javascript_Html

如何使用Javascript从文本框中交织输入

javascript html

如何使用Javascript从文本框中交织输入,javascript,html,Javascript,Html,所以，这是我在这里的第一篇文章，我对一般的编码是相当陌生的，所以请容忍我。我试图从两个不同的文本框中获取用户输入，并在单击按钮后将它们交织在一起。因此，如果用户在第一个文本框中输入“abcd”，在第二个文本框中输入“1234”，则最后一个文本框中的结果将是“a1b2c3d4”。这是我的密码： <!DOCTYPE html> <html> <head> </head> <body> <label>Enter Text

所以，这是我在这里的第一篇文章，我对一般的编码是相当陌生的，所以请容忍我。我试图从两个不同的文本框中获取用户输入，并在单击按钮后将它们交织在一起。因此，如果用户在第一个文本框中输入“abcd”，在第二个文本框中输入“1234”，则最后一个文本框中的结果将是“a1b2c3d4”。这是我的密码：

<!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";
}

var myButton=document.getElementById（“myBTN”）；
myButton.addEventListener（“单击”，合并）；
函数merge（）{
var a=document.getElementById（“userInput1”）.value；
var b=document.getElementById（“userInput2”）.value；
var aMod=a.拆分（“”）；
var bMod=b.分割（“”）；
var c=“”
对于（i=0；i


当我尝试执行它时，我没有收到任何错误，但是当我单击按钮时，什么也不会发生。感谢您的帮助。
您的脚本存在一些问题，这对于初学者来说是很自然的，所以不要灰心丧气

缺少分号
在Javascript的第8行，你不能用分号来结束谎言。我相信这在Javascript中不是一个关键问题，但它确实是一个很好的实践
缺少var
在for
循环中，使用变量i
，而不首先声明它（）。这意味着i
在全局范围内声明，这可能导致意外行为
将aMod和bMod视为整数，而不是数组
变量aMod
和bMod
是数组，而不是整数。为了将它们与i
进行比较，您需要比较它们的。长度

您包含了中断程序流的返回语句
如果要返回一个值以供以后使用，则只需要一个return语句。由于函数merge（）
将值c
分配给最后一行中的元素output
，因此不需要return语句
getElementById区分大小写
在最后一行中，您编写了getElementbyId
而不是getElementbyId
（注意字母B
）
您指定的是值“c”，而不是变量c
同样在最后一行中，您将字符串值“c”分配给元素输出
，而不是变量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;
}

var myButton=document.getElementById（“myBTN”）；
myButton.addEventListener（“单击”，合并）；
函数merge（）{
var a=document.getElementById（“userInput1”）.value；
var b=document.getElementById（“userInput2”）.value；
var aMod=a.拆分（“”）；
var bMod=b.分割（“”）；
var c=“”；
对于（变量i=0；i
你的脚本有几个问题，这对于初学者来说是很自然的，所以不要灰心丧气

缺少分号
在Javascript的第8行，你不能用分号来结束谎言。我相信这在Javascript中不是一个关键问题，但它确实是一个很好的实践
缺少var
在for
循环中，使用变量i
，而不首先声明它（）。这意味着i
在全局范围内声明，这可能导致意外行为
将aMod和bMod视为整数，而不是数组
变量aMod
和bMod
是数组，而不是整数。为了将它们与i
进行比较，您需要比较它们的。长度

您包含了中断程序流的返回语句
如果要返回一个值以供以后使用，则只需要一个return语句。由于函数merge（）
将值c
分配给最后一行中的元素output
，因此不需要return语句
getElementById区分大小写
在最后一行中，您编写了getElementbyId
而不是getElementbyId
（注意字母B
）
您指定的是值“c”，而不是变量c
同样在最后一行中，您将字符串值“c”分配给元素输出
，而不是变量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;
}

var myButton=document.getElementById（“myBTN”）；
myButton.addEventListener（“单击”，合并）；
函数merge（）{
var a=document.getElementById（“userInput1”）.value；
var b=document.getElementById（“userInput2”）.value；
var aMod=a.拆分（“”）；
var bMod=b.分割（“”）；
var c=“”；
对于（变量i=0；i
您可以使用length
和charAt（）
来提供所需的输出，而不是使用split（）
和处理数组

var myButton=document.getElementById（“myBTN”）；
myButton.addEventListener（“单击”，函数（）{
设a=document.getElementById（“userInput1”）.value；
设b=document.getElementById（“userInput2”）.value；
设aLength=a.长度；
设bLength=b.长度；
设maxLength=Math.max（aLength，bLength）；
让