How to interweave input from textboxes using Javascript

Question

So, this is my first post here and I am pretty new to coding in general so bear with me. I am trying to get user input from two different textboxes and interweave them once a button is clicked. So if the user enters "abcd" in the first textbox and "1234" in the second, the result would be "a1b2c3d4" in the last textbox. Here is my code:

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

And my 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";
}

I'm not getting any errors when I try to execute it, but nothing will happen when I click the button. Any help is appreciated.

start with creating 'jsfiddle' with your code for everyone could run it and help — antiplayer
– antiplayer, Commented Dec 20, 2017 at 0:24

e_i_pi · Accepted Answer · 2018-07-09 14:28:14Z

There's a couple of problems with your script, which is natural for a beginner, so don't get disheartened.

Missing semi-colon

On line 8 of your Javascript you don't end your lie with a semicolon. I believe this isn't a critical issue in Javascript, but it's certainly good practice.

Missing var

In your for loop you use the variable i without declaring it first (var). This means i is declared in the global scope, which can lead to unexpected behavior.

Treating aMod and bMod as integers, not arrays

Your variables aMod and bMod are arrays, not integers. In order to compare them to i you need to compare their .length

You have included a return statement which breaks program flow

You only need a return statement if you're returning a value to be used later on. Since the function merge() assigns the value c to the element output in it's final line, you don't need the return statement.

getElementById is case sensitive

In your final line you have written getElementbyId not getElementById (note the letter B)

You are assigning the value "c" not the variable c

Also in your final line, you are assigning the string value "c" to your element output, not the variable c.

In summary, this code demonstrates the changes above:

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

score 0 · Accepted Answer · 2018-07-09 14:36:47Z

Instead of using split() and dealing with arrays you could use length and charAt() to provide the desired output.

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"/>

Collectives™ on Stack Overflow

How to interweave input from textboxes using Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related