每当单击下面的运算符时，如何终止功能并使它准备好创建另一个号码？只有javascript部分

如何解决每当单击下面的运算符时，如何终止功能并使它准备好创建另一个号码？只有javascript部分

在下面的计算器的JavaScript中（尚未完成），我创建了一个函数createNumber（），该函数使用单击的每个数字创建一个数字，直到单击运算符为止。如果单击，createNumber（）函数应终止，并将附加的数字分配给变量“ num1”，并且该函数应已准备好创建要分配给“ num2”变量的新数字。但是问题是我想不起来要终止功能并准备好在单击运算符时创建另一个数字。请帮忙。

const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);
let num1 = "";
let num2 = "";

function createNumber(){
    
    let appendedNumber = "";
    let num = "";
    for(let i = 0; i < $$(".number").length; i++){
        $$(".number")[i].addEventListener("click",function(){
            appendedNumber = appendNumber(this.innerText);
            showAppendedNumer(appendedNumber);
        });
    }
    
    function appendNumber(digit){
        num += digit;
        return num;
    }
    
    function showAppendedNumer(appendedNumber){
        $(".answer").innerText = appendedNumber;
    }
    
    return appendedNumber;
}

for(let i = 0; i < $$(".operator").length; i++){
    $$(".operator")[i].addEventListener("click",function(){
        clickedOperator(this.innerText);
    });
}

function clickedOperator(opr){
    if(opr == "C"){
        num1 = "";
        $(".answer").innerText = "";
        $(".history").innerText = "";
        
    }
}

num1 = createNumber();

*,*::after,*::before{
    font-family: 'Noto Sans KR',sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    font-size: 20px;
}
.main-container{
    background-color: aquamarine;
    height: 720px;
    border: 1px solid aquamarine;
}
.calculator{
    width: 500px;
    height: 700px;
    margin: 5px auto 0;
    background-color: lightskyblue;
    border: 1px solid black;
    border-radius: 50px;
    box-shadow: 7px 7px 8px -4px;
}
.screen{
    margin: 30px 20px;
    height: 150px;
    border: 5px solid grey;
    border-radius: 10px;
    background-color: #e6e6e6;
    text-align: right;
}
.history{
    font-size: 1.5rem;
    height: 45%;
    padding: 20px 25px 0 15px;
    color: #b3b3b3;
}
.answer{
    font-size: 2.5rem;
    padding: 0px 20px 20px 15px;
}
button{
    font-size: 1.5rem;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background-color: inherit;
    font-weight: bold;
}
.lines{
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.lines:nth-of-type(1){
    margin-bottom: 30px;
}
.keyboard{
    margin: 50px 20px;
    border: 5px solid grey;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
.operator{
    background-color: rgba(179,179,.25);
}
#divide{
    background-color: yellow;
}
#multiply{
    background-color: green;
}
#subtract{
    background-color: blue;
}
#add{
    background-color: indigo;
}
#equals{
    background-color: violet;
}
.number:hover{
    border: 1px solid rgba(77,255,195,.5);
    border-radius: 5px;
}
.number:active,.operator:active{
    font-size: 1.2rem;
    font-weight: normal;
}

    <div class="main-container">
        <div class="calculator">
            <div class="screen">
                <div class="history">

                </div>
                <div class="answer">

                </div>
            </div>
            <div class="keyboard">
                <div class="lines">
                    <button class="operator" id="clear">C</button>
                    <button class="operator" id="backspace">CE</button>
                    <button class="operator" id="percent">%</button>
                    <button class="operator" id="divide">÷</button>
                </div>
                <div class="lines">
                    <button class="number" id="seven">7</button>
                    <button class="number" id="eight">8</button>
                    <button class="number" id="nine">9</button>
                    <button class="operator" id="multiply">×</button>
                </div>
                <div class="lines">
                    <button class="number" id="four">4</button>
                    <button class="number" id="five">5</button>
                    <button class="number" id="six">6</button>
                    <button class="operator" id="subtract">-</button>
                </div>
                <div class="lines">
                    <button class="number" id="one">1</button>
                    <button class="number" id="two">2</button>
                    <button class="number" id="three">3</button>
                    <button class="operator" id="add">+</button>
                </div>
                <div class="lines">
                    <button class="number" id="point">.</button>
                    <button class="number" id="zero">0</button>
                    <button class="number" id="two-zero">00</button>
                    <button class="operator" id="equals">=</button>
                </div>
            </div>
        </div>
    </div>