No output is displayed in my Javascript code

Question

I am a beginner at javascript and i am stuck with this piece of code. Syntactically the code seems to have no error but when it is executed there is no output, both in the webpage and the console. Hence I am confused and am unable to understand where the error lies.

function SubMit() {
  var userName = document.getElementById("user").value;
  document.getElementById("out").innerHTML = userName;

  var fName = document.getElementById("firstName").value;

  var lName = document.getElementById("lastName").value;

  var eMail = document.getElementById("email").value;

  var p1 = document.getElementById("pass1").value;

  var p2 = document.getElementById("pass2").value;

  console.log(userName);
  console.log(fName);
  console.log(lName);
  console.log(eMail);
  console.log(p1);
  console.log(p2);
}

function click() {
  document.getElementById("c").innerHTML = "HELLO WORLD";
  console.log("hello world");
}

<form>
  <input type="text" placeholder="Username" id="user" required>
  <input type="text" placeholder="First Name" id="firstName" required>
  <input type="text" placeholder="Last Name" id="lastName">
  <input type="email" placeholder="Email" id="email" required>
  <input type="password" placeholder="Password" id="pass1" required>
  <input type="password" placeholder="Confirm Password" id="pass2" required>
  <button type="submit" onclick="SubMit()">SUBMIT</button>
</form>
<output id="out"></output>

<button type="button" onclick="click()">click me</button>
<p id="c"></p>

The problem with the c button is most likely the name of the function, just rename it from click to something like btnClick. — user5734311
– user5734311, Commented Aug 2, 2020 at 17:34

DCR · Accepted Answer · 2020-08-02 17:36:46Z

1

click() is already defined as a javascript method

function SubMit() {
  var userName = document.getElementById("user").value;
  document.getElementById("out").innerHTML = userName;

  var fName = document.getElementById("firstName").value;

  var lName = document.getElementById("lastName").value;

  var eMail = document.getElementById("email").value;

  var p1 = document.getElementById("pass1").value;

  var p2 = document.getElementById("pass2").value;

  console.log(userName);
  console.log(fName);
  console.log(lName);
  console.log(eMail);
  console.log(p1);
  console.log(p2);
}

function myClick() {
  document.getElementById("c").innerHTML = "HELLO WORLD";
  console.log("hello world");
}

<form>
  <input type="text" placeholder="Username" id="user" required>
  <input type="text" placeholder="First Name" id="firstName" required>
  <input type="text" placeholder="Last Name" id="lastName">
  <input type="email" placeholder="Email" id="email" required>
  <input type="password" placeholder="Password" id="pass1" required>
  <input type="password" placeholder="Confirm Password" id="pass2" required>
  <button type="submit" onclick="SubMit()">SUBMIT</button>
</form>
<output id="out"></output>

<button type="button" onclick="myClick()">click me</button>
<p id="c"></p>

answered Aug 2, 2020 at 17:36

DCR

15.8k13 gold badges61 silver badges131 bronze badges

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

1 Comment

Dave Newton Over a year ago

Might be good to explain where it's defined, e.g., in onclick you're already scoped to the element, and HTMLElements have a click method.

bhuwan · Accepted Answer · 2020-08-02 17:54:39Z

1

Change output tag with div tag as.

<div id="out"></div>

rename click() to any other name. click() is predefined js function and you have to override the function before using it preventing the click event.

edited Aug 2, 2020 at 17:54

answered Aug 2, 2020 at 17:43

bhuwan

1166 bronze badges

Collectives™ on Stack Overflow

No output is displayed in my Javascript code

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