CODEWITHSUNDEEP
javascripthtml
SChettri
SChettri

Reputation: 13

No output is displayed in my Javascript code

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>

Upvotes: 1

Views: 398

Answers (2)

bhuwan
bhuwan

Reputation: 116

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.

Upvotes: 1

DCR
DCR

Reputation: 15657

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>

Upvotes: 1

Related Questions