Return HTML input with JavaScript

Question

I would like to have my code return the HTML input using an alert.

I tried to with this code, below, but the output was nothing. I am pretty sure that its not the button...

<center>
  <h3>Enter The Username And Password To Unlock This Computer</h3>
  <script>
    function incorrect() {
      var user = document.getElementById("username");
      var pass = document.getElementById("password");
      text = "the username '" + user + "' is incorrect, and the password '" + pass + "' is also incorrect"
      console.log(text)
      alert(text)
    }
  </script>
  <form>
    <h6>Username</h6><input type="text" id="username" name="username" value="">
    <h6>Password</h6><input type="text" id="password" name="password" value="">
    <br><button type="button" onclick="incorrect">Unlock</button>


  </form>
</center>

Try to change onclick="incorrect" to onclick="incorrect()" — gui3
– gui3, Commented Feb 13, 2020 at 21:20
An alert can't have inputs, it's just text. You can either make a custom alert that does what you want or you can use the standard alert to display messages. — geco17
– geco17, Commented Feb 13, 2020 at 21:21
<center> tag is deprecated for more than 10 years, it's use is not advisable and it can stop working at any time — Calvin Nunes
– Calvin Nunes, Commented Feb 13, 2020 at 21:23

DCR · Accepted Answer · 2020-02-13 22:16:24Z

1

Do you want the text that is being typed in or just the html input block?

<center>
  <h3>Enter The Username And Password To Unlock This Computer</h3>
  <script>
    function incorrect() {
      var user = document.getElementById("username").value;
      var pass = document.getElementById("password").value;
      text = "the username '" + user + "' is incorrect, and the password '" + pass + "' is also incorrect"
      console.log(text)
      alert(text)
    }
  </script>
  <form>
    <h6>Username</h6><input type="text" id="username" name="username" value="">
    <h6>Password</h6><input type="text" id="password" name="password" value="">
    <br><button type="button" onclick="incorrect()">Unlock</button>


  </form>
</center>

answered Feb 13, 2020 at 22:16

DCR

15.8k13 gold badges61 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

thedankboi Over a year ago

The text that is being typed in please, @DCR, thank you!

Iłya Bursov · Accepted Answer · 2020-02-13 21:20:08Z

0

the problem is about braces, you should use <br><button type="button" onclick="incorrect()">Unlock</button>

      function incorrect(){
         var user = document.getElementById("username");
        var pass = document.getElementById("password");
        text = "the username '"+user+"' is incorrect, and the password '"+pass+"' is also incorrect"
        console.log(text)
        alert(text)
      }

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>
    <center>
    <h3>Enter The Username And Password To Unlock This Computer</h3>

    <form>
      <h6>Username</h6><input type="text" id="username" name="username" value="">
      <h6>Password</h6><input type="text" id="password" name="password" value="">
      <br><button type="button" onclick="incorrect()">Unlock</button>


    </form>
    </center>
  </body>
</html>

answered Feb 13, 2020 at 21:20

Iłya Bursov

24.4k4 gold badges36 silver badges68 bronze badges

4 Comments

Daemon Beast Over a year ago

They are also trying to concatenate [object HTMLInputElement] instead of using .value to extract the value.

thedankboi Over a year ago

I just tried it and it gave me

“the username '[object HTMLInputElement]' is incorrect, and the password '[object HTMLInputElement]' is also incorrect”

Iłya Bursov Over a year ago

@ThePythonCoder right, this is what you've coded in js function

Iłya Bursov Over a year ago

@Zera question was why function is not called, not how to implement proper validation or fix error message

Vadym · Accepted Answer · 2020-02-13 22:08:47Z

0

<input type="text" class="input">
<button class="button">sad</button>


let t = document.querySelector('.button');

t.addEventListener('click', function () {
                let y = document.querySelector('.input').value;
                console.log(y);
           });

answered Feb 13, 2020 at 22:08

Vadym

213 bronze badges

3 Comments

Triby Over a year ago

Please ellaborate a little bit more your answer and tell OP how it works.

Vadym Over a year ago

its easy. we take value from input let y = document.querySelector('.input').value; and do with this data what we want console.log(y);

Daemon Beast Over a year ago

@ВадимШляхов Please edit that explanation into your answer.

Collectives™ on Stack Overflow

Return HTML input with JavaScript

3 Answers 3

1 Comment

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related