'My terminal done with javascript doesn't return the correct result

I have a lot of problems with my js code. So, I make an html page looks like terminal, for school exercise. The html and css works good, but now I have to make it operable. I wrote this code:

let s = ""; 
let index = ""; 
let subs = "";
let operator = ""; 
let x = 0; 
let y = 0; 
let opIndex = 0; 
let std = "macbook@macbook-air :$ > ";


let somma = (x, y) => {
    return x + y;
} 

let differenza = (x,y) => {
    return x - y;
}

let prodotto = (x,y) => {
    return x*y;
}

let quoziente = (x, y) => {
    return x / y;
}

function findIndex() {
    for (let i = 0; i < subs.length-1; i++) {
        if (subs[i] === '+') {
            opIndex = i;
            return opIndex;
        }
        else if(subs[i] === '-') {
            opIndex = i;
            return opIndex;
        }
        else if(subs[i] === '*') {
            opIndex = i;
            return opIndex;
        }
        else if(subs[i] === '/') {
            opIndex = i;
            return opIndex;
        }
    }
}


function findOp() {
    opIndex = findIndex();
    let s1 = subs.substring(0, opIndex-1);
    let s2 = subs.substring(opIndex+1, subs.length);
    x = parseInt(s1);
    y = parseInt(s2);
    operator = subs[opIndex];
    return operator;
}

function operazione(x, y, operator) {
    if (operator === '+') {
        return somma(x, y);
    }
    else if (operator === '-') {
        return differenza(x, y);
    }
    else if (operator === '*') {
        return prodotto(x, y);
    }
    else if (operator === '/') {
        return quoziente(x, y)
    }
}



document.getElementById("terminal").insertAdjacentText("afterbegin", std);


document.getElementById("terminal").addEventListener("input", () => {
    s = document.getElementById("terminal").textContent;
    index = s.indexOf('>');
    subs = s.substring(index+1, s.length);
})


document.getElementById("terminal").addEventListener("keyup", (event) => {
    if (event.key === 'Enter') {
        let op = findOp();
        let ris = operazione(x, y, op);
        document.getElementById("terminal").insertAdjacentText("beforeend", "\n");
        document.getElementById("terminal").insertAdjacentText("beforeend", ris);
        document.getElementById("terminal").insertAdjacentHTML("beforeend", "<br>");
        document.getElementById("terminal").insertAdjacentText("beforeend", std);
        console.log(ris);
    }
})

And this is the HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../index/css/terminal.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="header-bar">
            <button class="chiudi">&#10005</button>
            <button class="minimizza">&#9866</button>
            <button class="allarga">&#10530</button>
            <span>Terminale</span>
        </div>
        <div id="terminal" class="terminal" 
        contenteditable="true"></div>
    </div>

<script src="./js/terminal.js"></script>

</body>

</html>

Now, I have 2 big problems: the variable ris prints even the same result, the first it contains and don't change anymore; and the second problem is focused on the caret, because after press enter the caret go in new line where the ris variable appears and in another new line it print "macbook@macbook-air : >", instead I want the caret go after the string "macbook@macbook-air >". I hope someone can help me to resolve this two problems, and if someone sees another problem tell me please. Thank you!

javascript

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'My terminal done with javascript doesn't return the correct result

Sources

Related Questions