estaba terminando de programar una calculadora sin hacer uso de eval()
y tengo unos pequeños problemas que solucionar pero nose como. He creado este codigo que simula los problemas que tengo en el otro codigo que es mas extenso que este.
Primer problema: Al eliminar el ultimo caracter de la etiqueta
<sup>
, me sigue buscando las etiquetas sup y me sigue eliminando el exponente y no el texto adyacente de la esta etiqueta, es decir, debe seguir un orden como Por Ejemplo: 20 29 12 24 . Primero debe eliminar 24, luego 12, despues 29 y al final 20.Segundo problema: Al agregar mas de 20 caracteres en el div con atributo contenteditable me genera un scroll horizontal que tu manualmente tienes que re ajustarlo para llegar ultimo valor. ¿Como haria para que automaticamente se reajuste al ultimo caracter sin tener que hacer scroll horizontal? . Sino entendiste bien esta pregunta, un ejemplo claro seria la calculadora de Google, que despues de agregar 36 o mas caracteres, no se oculta y sigue manteniendo el ultimo caracter.
Problema opcional: Este problema se genera al usar
contenteditable
, cuando el texto de un elemento que es hijo de un elemento con atributocontenteditable
esta vacio, me genera una etiqueta span con etiqueta style por alguna razon. Provocando un problema de estilos al volver a generar texto cuando volvemos a escribir. Ejemplo:<div>20<sup>2</sup></div>
, eliminamos 2, nos crea un span con todos los estilos que le damos a la etiqueta<sup>
. ¿Cómo puedo evitar que me cree esos<span>
?
A continuación el codigo de prueba:
document.addEventListener("DOMContentLoaded", () =>{
const textInput = document.getElementById('input'),
deleteCharacters = document.getElementById("delete-characters"),
deleteAllCharacters = document.getElementById("delete-all-characters"),
addExp = document.getElementById('add-exponent'),
numberButtons = document.querySelectorAll('.number'),
operatorSum = document.getElementsByClassName('operator');
/* Si el hay un solo 0 en el input, reemplazar por numero, de lo contrario
agregar numeros */
const changeText = (text, elementParent) =>{
if (elementParent.innerHTML == 0 || elementParent.innerHTML == "x"){
elementParent.innerHTML = text.innerHTML;
} else {
elementParent.innerHTML += text.innerHTML;
}
}
// Eliminar ultimo caracter
const deleteLastCharacter = y =>{
y.innerHTML = y.innerHTML.substring(0, y.innerHTML.length - 1);
}
// Eliminar ultimos caracteres de string
deleteCharacters.addEventListener('click', ()=>{
let lastSupTag = document.querySelector('sup:last-child');
if (textInput.contains(lastSupTag)){
/* Si la ultima etiqueta sup esta vacia, remuevela, de lo contrario
elimina el ultimo caracter de esta */
lastSupTag.innerHTML === ''
? lastSupTag.remove()
: deleteLastCharacter(lastSupTag)
} else {
/* Funcion para eliminar ultimo caracter de entrada de texto */
deleteLastCharacter(textInput)
}
});
// Agregar exponente
addExp.addEventListener('click', ()=>{
let sup = document.createElement('sup');
exponent = document.createTextNode('x');
sup.appendChild(exponent);
textInput.appendChild(sup);
statusPower = true
});
var statusPower = true;
// Iteracion sobre cada boton de numero
numberButtons.forEach((number) =>{
number.addEventListener('click', () =>{
let lastSupTag = textInput.querySelector('sup:last-child');
if (textInput.contains(lastSupTag)){
lastSupTag.innerHTML === "x" // Si es equis se reemplaza por el numero
? changeText(number, lastSupTag)
: statusPower == true // Si es true y no es equis se concatenan los numero
? changeText(number, lastSupTag)
: changeText(number, textInput)
} else {
changeText(number, textInput); // concatenar numeros
}
});
});
// Evento click para agregar signo de suma
operatorSum[0].addEventListener('click', e =>{
tokenSum = e.target;
changeText(tokenSum, textInput)
statusPower = false; // Cambia a false para dejar de escribir en potencia
})
// Evento click para eliminar todo y agregar 0
deleteAllCharacters.addEventListener('click', () =>{
textInput.innerHTML = "0";
})
// // Intente esto para el scroll horizontal
// document.addEventListener('click', () =>{
// textInput.focus();
// })
}); // End
body{
font-family: system-ui, sans-serif;
}
body > button{
display: block;
margin: 15px 0;
}
button:hover{
cursor: pointer;
}
#input{
border: 2px solid black;
padding: 10px;
width: 20%;
white-space: nowrap;
overflow-y: hidden;
text-align: right;
}
#input:focus{
outline: none;
}
/*#input > span{
font-size: 100% !important
}*/
.container{
display: grid;
grid-gap: 10px;
grid-template-columns: 6% 6% 6%;
}
.operator{
background: black;
color: white;
border: none;
grid-column: 2/4;
grid-row: 4;
}
<div id="input" contenteditable="true">0</div>
<button id="add-exponent">Agregar exponente</button>
<button id="delete-characters">Eliminar caracteres</button>
<button id="delete-all-characters">Eliminar todo</button>
<div class="container">
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<button class="number">0</button>
<button class="operator">+</button>
</div>
Agradeceria mucho que puedieran ayudar con estos pequeños problemas que resultaron un poco tediosos de resolver. Ese codigo no ejecutara ninguna operacion, solo simula un problema que tengo. Gracias de antemano :)