Estoy confuso, ¿cómo puedo mostrar un mensaje de error cuando no encuentro ningún dato?
const getValue = ()=>{ const error = document.getElementById('error') const searchField = document.getElementById('searchValue') const searchValue = searchField.value; } <div class="position"> <div class="d-flex justify-content-center"> <div class="input-group mb-3 w-50"> <input type="text" id="searchValue" class="form-control" placeholder="Search Your Phone" aria-label="Recipient's username" aria-describedby="button-addon2"> <button class="btn btn-outline-secondary" type="button" onclick="getValue()" id="button-addon2">Search</button> </div> <p class="text-center error-color" id="error"></p> </div> </div>No estoy exactamente seguro de lo que está tratando de hacer, pero podemos verificar la longitud de la cadena en el campo de entrada para mostrar un mensaje de error si el usuario no ha ingresado nada.
Cambié el nombre de algunas de sus funciones e intenté hacer el código lo más simple posible para que fuera fácil de leer. Hay algunos atajos que se pueden tomar. Por ejemplo, la función clearError podría ser simplemente la función setError con una cadena en blanco y if/else podría ser simplemente un if con retorno, etc.
window.addEventListener('DOMContentLoaded', (event) => { const error = document.getElementById('error'); const searchField = document.getElementById('searchValue'); const searchButton = document.getElementById('button-addon2'); const clearError = () => error.innerHTML = ""; const setError = (str) => error.innerHTML = str; const onSearch = () => { clearError(); if (searchField.value.length < 1) { setError("Please enter a search term"); } else { // ... do some search } } searchButton.addEventListener('click', onSearch); }); <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" /> <div class="position"> <div class="d-flex justify-content-center"> <div class="input-group mb-3 w-50"> <input type="text" id="searchValue" class="form-control" placeholder="Search Your Phone" aria-label="Recipient's username" aria-describedby="button-addon2"> <button class="btn btn-outline-secondary" type="button" onclick="" id="button-addon2">Search</button> </div> </div> <p class="text-center error-color" id="error"></p> </div>