I'm making a web page where users have to enter mathematical equations in a normal input like this (without a text editor):
<input type="text" name="Ecuacion">
How can I do it so that users can enter the equations without having to do it with a complicated syntax, avoid having to put "sqrt (9" and things like that
You can make a button, that automatically write the symbol in the input, to which you can add a keyup event, that is, when you lift the key when writing, and if a text is found in the input with that symbol, the square root, here you must press where it says "square root" and its symbol will be put, then you write the number and it will take the root out.
window.addEventListener("DOMContentLoaded",f);
function f(){
var li = document.getElementById("options").getElementsByTagName("li"),
eq = document.getElementById("equation"),
i = document.getElementById("final");
li[0].addEventListener("click", ()=> {
eq.value += "√";
});
var sqrtPattern = /√[0-9]+/ig;
eq.addEventListener("keyup", () => {
if(sqrtPattern.test(eq.value)) {
var find = eq.value.match(sqrtPattern).join("").substr(1);
i.innerHTML = 'La raiz cuadrada de <b>${find}</b> es <b>: ${Math.sqrt(find).toFixed(2)}</b>';
}
});
}<ul id="options">
<li>Raiz cuadrada</li>
</ul>
<input type="text" id="equation">
<i id="final"></i>