¿Alguien puede explicar por qué la parte "onclick" no se activa?
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>PD:
Estoy aprendiendo JS, así que todavía no estoy muy familiarizado con muchas cosas. (Acabamos de terminar las cosas de HTML el semestre pasado)
no getElementByID . usa 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>Funciona, acaba de tener un error tipográfico con getElementByID , debería ser 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>En caso de que otros se encuentren con este mismo problema, he subido una captura de pantalla del "registro de cambios de git", que tiene todas las correcciones a lo anterior, para que funcione según lo previsto. ^_^