CODEWITHSUNDEEP
javascripthtml
Dabbyd123
Dabbyd123

Reputation: 3

How to interweave input from textboxes using Javascript

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.

Upvotes: 0

Views: 131

Answers (2)

user2560539
user2560539

Reputation:

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

Upvotes: 0

e_i_pi
e_i_pi

Reputation: 4820

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

Upvotes: 2

Related Questions