Trying to get textbox input and output working

The core js function and console output works when the nText var is set manually (var nText = "exampleText" for instance) but I’m trying to make it take textbox input, perform the function, and then spit the result back out into the same textbox but I’m stuck on getting that to work. Any help with this would be appreciated, I’m still fairly new to js and this is just a little personal project I’m trying to do for practice.

<form>
<label for="nText">Your Text:</label>
<input type="text" id="nText" name="nText"><br><br>
<button onclick="firstLetterUppercase (input = 'nText')">aLtErNaTe</button>
</form>
<script>
    
function firstLetterUppercase (input = 'nText') {
  var res = "";
  for (i=0; i < input.length; i++) {
     res += i % 2 == 0 ? input.charAt(i).toUpperCase() : input.charAt(i);
  }
  return res;  
}

var nText = document.getElementById("nText").value;

console.log(firstLetterUppercase(nText));
</script>

4 thoughts on “Trying to get textbox input and output working”

  1. There are lil modifications you will need to make, just try the below code and see if that helps

    <form>
    <label for="nText">Your Text:</label>
    <input type="text" id="nText" name="nText"><br><br>
    <button onclick="firstLetterUppercase()">aLtErNaTe</button>
    </form>
    <script>
        
    function firstLetterUppercase () {
    var input = document.getElementById("nText").value
      var res = "";
      for (i=0; i < input.length; i++) {
         res += i % 2 == 0 ? input.charAt(i).toUpperCase() : input.charAt(i);
      }
       document.getElementById("nText").value =  res;  
    }
    
    </script>
    Reply
  2. This trick is in setting document.getElementById("nText").value after you’ve manipulated it.

    //  a DOM reference to make it easy to get and set the value
    const nTextField = document.getElementById('nText');
    
    //  button handler
    document.getElementById('b').addEventListener('click', ev => {
      ev.preventDefault();
      const nText = nTextField.value
      const massagedText = firstLetterUppercase(nText);
      // Set the text field value
      nTextField.value = massagedText;
    });
    
    //  text manipulation
    const firstLetterUppercase = (input) => {
      var res = "";
      for (i=0; i < input.length; i++) {
         res += i % 2 == 0 ? input.charAt(i).toUpperCase() : input.charAt(i);
      }
      return res;  
    }
    <form id="f">
      <label for="nText">Your Text:</label>
      <input type="text" id="nText" name="nText"><br><br>
      <button type="button" id="b">aLtErNaTe</button>
    </form>
    Reply
  3. Here are few issues listed below.

    1. Invalid argument to function onclick="firstLetterUppercase (input = 'nText')" in html.
    2. trying to get the value of input on javascript load rather then click. var nText = document.getElementById("nText").value;
    3. calling the function again even though it has been called in onclick console.log(firstLetterUppercase(nText));

    My Issue..

    Why the form disappear when onsubmit is clicked?

    function firstLetterUppercase () {
      var nText = document.getElementById("nText").value;
    
      var res = "";
      for (let i=0; i < nText.length; i++) {
         res += i % 2 == 0 ? nText.charAt(i).toUpperCase() : nText.charAt(i);
      }
      document.getElementById("name").innerHTML = res;
      
    }
    <form onsubmit="firstLetterUppercase()">
    <label for="nText">Your Text:</label>
    <input type="text" id="nText" name="nText"><br><br>
    <button type="submit">aLtErNaTe</button>
    <div id="name"></div>
    </form>
    Reply
  4. There are many updates required in your code.

    1. Passing param was incorrect in html onclick="firstLetterUppercase (input = 'nText')"
    2. Button type should be button, to avoid submitting the form,
    3. In console you were passing the empty string to the function which will not be overridden by input = "nText" because empty string != null
    4. No need to use charAt(i), when you can use index.
    5. While passing the parameter including some capital letters, you’ll need to convert them to toLowerCase as well
    6. On click you are not printing the result in console.
    function firstLetterUppercase(input, print) { // added flag print
      input = (input == "") ? "nText" : input; // if input is empty string
      var res = "";
      for (i = 0; i < input.length; i++) {
        res += (i % 2 == 0) ? input[i].toUpperCase() : input[i].toLowerCase(); // converted capital letters to lower case
      }
    
      // to print if the flag asked to print value
      // else return the value to the caller
      
      if (print == 1) console.log(res, "(button clicked)")
      else return res;
    
    }
    var nText = document.getElementById("nText").value;
    
    console.log(firstLetterUppercase(nText));
    <form>
      <label for="nText">Your Text:</label>
      <input type="text" id="nText" name="nText"><br><br>
      <button type="button" onclick="firstLetterUppercase('nText', 1)">aLtErNaTe</button>
    </form>
    Reply

Leave a Comment