How to fix reset button problem in js dom

问题

I have a project to create a minigame in JS DOM:

creates two shapes one circle and the other square
create a random color for each of them, and toggle between them
give them a random location
when the user presses one of them it show on table the time(ms or s) took to click

I've completed most the project, but I am now stuck. I created 2 buttons: a "start game" button (works fine), and a "reset" button (the problem). I was able to remove the table with the reset button and start a new one, but it adds extra <td> cells every time I press the shape (in the second round of the game). How do i fix this? I've tried adding e.stoppropagation(), but it didn't work.

//Reference

const circleS = document.querySelector('.circle');
const squareS = document.querySelector('.square');
const btn = document.querySelector('button');
const tableScores = document.querySelector('table');

const btnReset = btn.nextElementSibling;


//Random color function

const randomC = (divShape) => {
    let randomColor = Math.floor(Math.random() * 9999) + 1325
    let stringColor = `#bb${randomColor}`

    divShape.style.backgroundColor = `${stringColor}`
    return divShape
};


//Random position function

const randomP = (divShape) => {
    let randomWidth = Math.floor(Math.random() * 1000) + 200;
    let randomHeight = Math.floor(Math.random() * 300) + 200 ;

    divShape.style.position = 'absolute';
    divShape.style.top = `${randomHeight}`
    divShape.style.bottom = `${randomHeight}`
    divShape.style.left = `${randomWidth}`
    divShape.style.right = `${randomWidth}`

    return divShape
};


//Toggle between Square and circle + change Color + Change 
Positions

let shapState = true
const changeShape = () => {
    if (shapState) {
        circleS.style.display = 'block';
        squareS.style.display = 'none'
        randomC(circleS);
        randomP(circleS);

    } else {
        squareS.style.display = 'block'
        circleS.style.display = 'none';
        randomC(squareS);
        randomP(squareS);
    }
    shapState = !shapState
};


// Time function

let startTime, endTime

function start() {
    startTime = new Date();
    return startTime;
};

function end() {
    endTime = new Date();
    let timeElapse = endTime - startTime;
    return timeElapse;
}


// Game start by clicking button

btn.addEventListener('click', () => {  
    start();

    // Random shapes been appering
    let i = 0
    const counter = setInterval(() => {
        changeShape();
        i++
        if (i === 6) {
            clearInterval(counter);
            circleS.style.display = 'none';
            squareS.style.display = 'none';
            end();
        }
    }, 900);


    circleS.addEventListener('click', () => {
        if (end() >= 1000) {
            let changeC = end();
            changeC = changeC /= 1000;
            showTimes(changeC);
        } else {
            showTimes(end());
        } 
        start();       
    });

    squareS.addEventListener('click', () => {
        if (end() >= 1000) {
            let changeS = end();
            changeS = changeS /= 1000;
            showTimes(changeS);
        } else {
            showTimes(end());
        }   
        start(); 
    });
});


// show times and add to a table

function showTimes(time) {
    if (end() >= 1000) {
        tableScores.innerHTML += `<tr><td> ${time}s</td> </tr>`
    } else {
        tableScores.innerHTML += `<tr><td> ${time}ms</td> </tr>`
    }
};

// Reset Button

btnReset.addEventListener('click', ()=> {
    tableScores.innerHTML = `<tr> <th>Your time</th> </tr>`
});

<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
        <title>js_16_b</title>
        <style>
            body {
                font-family: 'Lato', sans-serif;
            }
    
            .circle {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                background-color: yellow;
                display: none;
    
            }
    
            .square {
                width: 100px;
                height: 100px;
                background-color: red;
                display: none;
    
            }
    
            button {
                display: block;
                padding: 1rem;
                font-weight: 600;
                background-color: lightgrey;
                color: black;
                border-radius: .5rem;
                margin: .5rem .5rem;
                float: left;
                width: 9%;
            }
    
            .theBtns::after {
                content: "";
                display: block;
                clear: both;
            }
    
            table {
                border: 2px solid black;
                border-collapse: collapse;
                margin: 1rem .5rem;
            }
    
            th,
            td {
                border: 2px solid black;
                padding: .8rem;
                text-align: center;
                text-transform: capitalize;
            }
            .header h2 {
                color: purple;
                text-transform: capitalize;
            }
        </style>
    </head>
    
    <body>
        <div class="header">
            <h2>Test your reaction</h2>
            <p>Click on the shape as quickly as you can!</p>
        </div>
    
        <div class="circle"></div>
        <div class="Square"></div>
    
        <div class="theBtns">
            <button>Start Game</button>
            <button>Reset</button>
        </div>
    
        <table>
            <tr>
                <th>Your time</th>
            </tr>
        </table>
   
    </body>
    </html>

来源：https://stackoverflow.com/questions/58559213/how-to-fix-reset-button-problem-in-js-dom

标签

javascript

dom-events