Trouble using a function with user input

Question

I am new to this. all online examples are not helping me debug. what am I missing? the idea is the user inputs something they want to turn into a cryptogram and the js function encrypts it for them. the js runs fine on its own. the disconnect happens when trying to make the function Crypt() work with the html.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8"/> 
<input type="text" id="input1" />
    <button onclick="Crypt()">Submit</button>

 <script src="app.js"></script>

         </head>
    <body>

    </body>

</html>


  function Crypt(){
var input = document.getElementById('input1').value;
    var resultArray = [];
for(var i = 0; i < input.length; i++){

if(input[i] === 'a'){
    resultArray.push('p');
} else if("input"[i] === 'b'){
    resultArray.push('l');
}else if(input[i] === 'c'){
    resultArray.push('m');
}else if(input[i] === 'd'){
    resultArray.push('n');
}else if(input[i] === 'e'){
    resultArray.push('k');
}else if(input[i] === 'f'){
    resultArray.push('o');
}else if(input[i] === 'g'){
    resultArray.push('i');
}else if(input[i] === 'h'){
    resultArray.push('j');
}else if(input[i] === 'i'){
    resultArray.push('t');
} //you get the idea
    else{
    resultArray.push(' ');
}
    } document.write(resultArray.join(''));
        }

What exactly is the problem? What happens? Anything? Are errors reported? — Pointy
– Pointy, Commented Jul 16, 2018 at 17:44
Just a tip, you may wish to change all of the else/if statements to "switch" - just makes things easier to read/maintain. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — BobtheMagicMoose
– BobtheMagicMoose, Commented Jul 16, 2018 at 17:48
@Pointy the function dose now work when i try to submit some text to the page. errors: Uncaught ReferenceError: resultArray is not defined at app.js:67 -----------------Uncaught ReferenceError: input is not defined at Crypt (app.js:72) at HTMLButtonElement.onclick (crypt.html:6) — conDon
– conDon, Commented Jul 16, 2018 at 17:52

Wais Kamal · Accepted Answer · 2018-07-16 17:48:07Z

You have placed your button inside the <head> tag. Everything else is fine. Place it inside the <body> and you're done!

function Crypt() {
  var input = document.getElementById('input1').value;
  var resultArray = [];
  for (var i = 0; i < input.length; i++) {
    if (input[i] === 'a') {
      resultArray.push('p');
    } else if ("input" [i] === 'b') {
      resultArray.push('l');
    } else if (input[i] === 'c') {
      resultArray.push('m');
    } else if (input[i] === 'd') {
      resultArray.push('n');
    } else if (input[i] === 'e') {
      resultArray.push('k');
    } else if (input[i] === 'f') {
      resultArray.push('o');
    } else if (input[i] === 'g') {
      resultArray.push('i');
    } else if (input[i] === 'h') {
      resultArray.push('j');
    } else if (input[i] === 'i') {
      resultArray.push('t');
    } else {
      resultArray.push(' ');
    }
  }
  document.write(resultArray.join(''));
}

<input type="text" id="input1"/>
<button onclick="Crypt()">Submit</button>

Collectives™ on Stack Overflow

Trouble using a function with user input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related