Tengo un problema con mi script. Tengo un campo editable y un botón al lado. Traté de hacer una función que comenzará a funcionar después de presionar el botón y leerá datos de mi campo de entrada, pasar el mouse no lee ningún valor de mi campo de entrada y devuelve que la entrada está vacía. ¿Podría sugerir alguna posible solución? No puedo cambiar ningún tipo de entrada o botón a otros. Código completo: https://codesandbox.io/s/cocky-black-7mezc?file=/code.html
const trigger = document.getElementById("poga1"); trigger.addEventListener("click", next); function next() { document.getElementById("input") // default to no data let message = "there are no data!"; const output = document.getElementById("output"); // get the value, this will be text - trim all leading and trailing spaces const value = this.value.trim(); if (value !== "") { // try to convert it to an integer const numeric = parseInt(value); // check if it's a number and if it matches what was entered if (isNaN(numeric) || numeric != value) { message = "not a number"; } else if (numeric >= 1 && numeric <= 3) { message = "not passed"; } else if (numeric >= 4 && numeric <= 10) { message = "passed!"; } else { message = "wrong data"; } } output.textContent = message; }; <span contenteditable="true"><p id="input"></p></span> <button id="poga1">Check!</button> <span contenteditable="true"><p id="output">Vispirms ievadi datus!</p></span>El problema es que estás leyendo this.value . this se refiere al botón, por lo que está leyendo el valor del botón. HTML
<div contenteditable="true" id="input"></div> <button id="poga1">Check!</button> <span><p id="output">Vispirms ievadi datus!</p></span>Guion
const trigger = document.getElementById("poga1"), input = document.getElementById("input"), output = document.getElementById("output"); trigger.addEventListener("click", next); function next() { document.getElementById("input") // default to no data let message = "There are no data!"; // get the value, this will be text - trim all leading and trailing spaces const value = input.innerHTML.trim(); if (value !== "") { // try to convert it to an integer const numeric = parseInt(value); // check if it's a number and if it matches what was entered if (isNaN(numeric) || numeric != value) { message = "not a number"; } else if (numeric >= 1 && numeric <= 3) { message = "not passed"; } else if (numeric >= 4 && numeric <= 10) { message = "passed!"; } else { message = "wrong data"; } } output.textContent = message; };Si está tratando de leer el contenido del elemento con una input de identificación, entonces debe cambiar la línea
const value = this.value.trim();a
const value = input.innerText.trim();