0
176
ViewsJS '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)
·
Juan Pablo Isaza
3 answers
Answer question0
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>
·
Juan Pablo Isaza
Report
0
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>
·
Juan Pablo Isaza
Report
0
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. ^_^
·
Juan Pablo Isaza
Report
Answer question