1

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 atributo contenteditable 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 :)

1 respuesta 1

1

Te traigo una solucción para el segundo problema que planteas: hacer scroll a la derecha cuando añades algún caracter con los botones de la calculadora.

Tienes que añadir esta línea cada vez que se añade un caracter:

document.getElementById('input').scrollLeft +=20;

La puedes poner por ejemplo en la función changeText()

2
  • Gracias por resolverme el 2do problema! Para ser sincero, desconocia la propiedad scrollLeft, tengo que aprender mas sobre js. Sobre el ultimo problema opcional, una buena solucion seria desde css agregas un font size o display none y desde codigo, a la etiqueta sup que creo, agregarle un removeAtribute para que no me genere un style en el span, aunque este todavia seguira apareciendo
    – Husdady
    el 18 dic. 2020 a las 21:55
  • Sobre el primer problema, aun no lo logro resolverlo, pero no te preocupes, seguire buscando soluciones o pensar una mejor logica.
    – Husdady
    el 18 dic. 2020 a las 21:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.