CODEWITHSUNDEEP
javascriptonclick
Kichiyou Naosuo
Kichiyou Naosuo

Reputation: 21

JS 'onclick' won't fire

Can anyone explain why the "onclick" part won't fire?

function displayHello() {

  let helloName = document.getElementByID('helloNameInput').value;

  // prints out the variable, to the button >>

  document.getElementByID("helloNameOutput").textContent = helloName
}
<!--Name input-->
<div class="mb-3">
  <label for="helloNameInput" class="form-label">Name:</label>
  <input type="text" class="form-control" name="helloNameInput" id="helloNameInput" placeholder="Enter a name" />
</div>

<!--Name output-->
<p class="lead" id="helloNameOutput"> </p>


<!--Display Hello! & Reset buttons-->
<div>
  <button class="btn btn-primary" id="displayHelloButton" onclick="displayHello()">Display Hello!</button>
  <button class="btn btn-danger" id="clearButton" onclick="clearName()">Clear</button>
</div>

PS:

I'm just learning JS, so, I'm not too familiar with a lot of stuff yet. (We just finished the HTML stuff last semester)

Upvotes: 0

Views: 61

Answers (3)

Kichiyou Naosuo
Kichiyou Naosuo

Reputation: 21

In case others run into this same issue, I've uploaded a screenshot of the "git change log", that has all the corrections to the above, so that it worked as intended. ^_^

enter image description hereenter image description here

Upvotes: 1

Hyunjune Kim
Hyunjune Kim

Reputation: 485

not getElementByID. use getElementById.

function displayHello() {
  let helloName = document.getElementById('helloNameInput').value;
  // prints out the variable, to the button >>
  document.getElementById("helloNameOutput").textContent = helloName
}
<!--Name input-->
<div class="mb-3">
  <label for="helloNameInput" class="form-label">Name:</label>
  <input type="text" class="form-control" name="helloNameInput" id="helloNameInput" placeholder="Enter a name" />
</div>

<!--Name output-->
<p class="lead" id="helloNameOutput"> </p>


<!--Display Hello! & Reset buttons-->
<div>
  <button class="btn btn-primary" id="displayHelloButton" onclick="displayHello()">Display Hello!</button>
  <button class="btn btn-danger" id="clearButton" onclick="clearName()">Clear</button>
</div>

Upvotes: 3

Samathingamajig
Samathingamajig

Reputation: 13245

It does work, you just had a typo with getElementByID, it should be getElementById

function displayHello() {

  let helloName = document.getElementById('helloNameInput').value;

  // prints out the variable, to the button >>

  document.getElementById("helloNameOutput").textContent = helloName
}
<!--Name input-->
<div class="mb-3">
  <label for="helloNameInput" class="form-label">Name:</label>
  <input type="text" class="form-control" name="helloNameInput" id="helloNameInput" placeholder="Enter a name" />
</div>

<!--Name output-->
<p class="lead" id="helloNameOutput"> </p>


<!--Display Hello! & Reset buttons-->
<div>
  <button class="btn btn-primary" id="displayHelloButton" onclick="displayHello()">Display Hello!</button>
  <button class="btn btn-danger" id="clearButton" onclick="clearName()">Clear</button>
</div>

Upvotes: 1

Related Questions