Trying to compare value of string that are programmatically added with javascript-CodePudding

I'm trying to prevent my laps from counting the same second. So I'm trying to take the current value and evaluate it as != not equal to the previous value before appending it.

Here is the function, and my HTML. Not sure if I can do anything with the ids I set up. I have jquery set up to run in my javascript, so if you have any ideas with that I would be open to listening. There are a couple of things that probably don't have a use that I have not removed yet.

Javascript Function

let seconds = 0;
let minutes = null;
let hours = null;
let startTimer = null;
let time = null;
let isRunning = (false);

let lapContainer = [];
let x;
let outputseconds;
let outputminutes;
let outputhours;

//connection to button
document.getElementById("start").addEventListener("click", start);
document.getElementById("stop").addEventListener("click", stop);
document.getElementById("reset").addEventListener("click", reset);
document.getElementById("lap").addEventListener("click", lap);
document.getElementById("resetLaps").addEventListener("click", resetLaps);

//functions
function start() {
    if (isRunning === false) {
        isRunning = true;

        //interval
        startTimer = setInterval(function () {
            seconds  ;

            if (seconds <= 9) {
                outputseconds = "0"   seconds;
                document.getElementById("seconds").innerHTML = outputseconds;
            } else if (seconds <= 60) {
                outputseconds = seconds;
                document.getElementById("seconds").innerHTML = outputseconds;
            } else if (seconds >= 60) {
                minutes  ;
                outputseconds = "00";
                outputminutes = "0"   minutes;
                document.getElementById("seconds").innerHTML = outputseconds;
                document.getElementById("minutes").innerHTML = outputminutes;
                seconds = 0;
            } else if (minutes >= 9) {
                outputminutes = minutes;
                document.getElementById("minutes").innerHTML = outputminutes;
            } else if (minutes >= 60) {
                hours  ;
                outputminutes = "00";
                outputhours = "0"   hours;
                document.getElementById("minutes").innerHTML = outputminutes;
                document.getElementById("hours").innerHTML = outputhours;
                minutes = 0;
            } else if (hours > 9) {
                outputhours = hours;
                document.getElementById("hours").innerHTML = outputhours;
            }
        }, 1000); //end of interval
    } // end of if check

    // should this be seperated out as a function???
    let startTime = "00";

    if (outputseconds > 0) {
        if (outputminutes > 0) {
            if (outputhours > 0) {
                return outputhours   ":"   outputminutes   ":"   outputseconds;
            } else {
                return startTime   ":"   outputminutes   ":"   outputseconds;
            } // hours
        } else {
            return startTime   ":"   startTime   ":"   outputseconds;
        } //minutes
    } else {
        return startTime   ":"   startTime   ":"   startTime;
    } // end of nested if seconds
} //end of start function

function stop() {
    clearInterval(startTimer);
    isRunning = false;
}

function reset() {
    clearInterval(startTimer);
    document.getElementById("seconds").innerHTML = "00";
    document.getElementById("minutes").innerHTML = "00";
    document.getElementById("hours").innerHTML = "00";

    seconds = 0;
    minutes = 0;
    hours = 0;

    isRunning = false;
}

function lap() {
    if (isRunning === true) {
        //initialize time
        let lapTime = start();
        //create connection to div
        lapContainer = document.getElementById("lapContainer");
        // how to check if they equal each other

        //create element
        const para = document.createElement("p");

        //how many laps have been created
        let i = document.getElementById("lapContainer").childElementCount;
        let index = [i];
        //create an index that will add an id to paragraph
        para.id = index;

        //add the lap to text
        para.innerText = lapTime;
        let laps = [];

        laps = document.getElementById("lapContainer").childNodes[1].textContent;

        let lastItem = laps[laps.length - 1];
        let currentItem = laps[laps.length];

        document.getElementById("test").innerHTML = laps;
        if (currentItem !== lastItem) {
            lapContainer.appendChild(para);
        }
    }
}

function resetLaps() {
    $(lapContainer).empty();
    isRunning = false;
}

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <title>Stopwatch</title>
        <meta name="description" content="A simple stopwatch application" />
        <meta name="author" content="****" />

        <link rel="icon" href="/favicon.ico" />
        <link rel="icon" href="/favicon.svg" type="image/svg xml" />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

        <link rel="stylesheet" href="./css/styles.css" />
    </head>

    <body>
        <!-- your content here... -->
        <div >
            <a href="timer.html" id="timer">Timer</a>
            <a href="alarm.html" id="alarm">Alarm</a>
        </div>
        <div >
            <div >
                <div >
                    <button type="button" id="start">START</button>
                    <button type="button" id="stop">STOP</button>
                    <button type="button" id="reset">RESET</button>
                    <button type="button" id="lap">LAP</button>
                    <button type="button" id="resetLaps">RESET LAPS</button>
                </div>

                <div >
                    <div >
                        <p id="textWrapper">
                            <span id="hours">00</span>:<span id="minutes">00</span>:<span
                                id="seconds"
                                >00</span
                            >
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div ></div>
        <div id="lapContainer" ></div>
        <p id="test"></p>
        <script src="./scripts/scripts.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </body>
</html>

CodePudding user response：

Few things you might need to do:

1.When you set the laps array you need to get the array of texts of the all nodes, not just a text of the first node:

//laps = document.getElementById("lapContainer").childNodes[1].textContent;
laps = Array.from(document.getElementById("lapContainer").childNodes).map(node => node.textContent);

2.When you set currentItem you can not use laps[laps.length] because your new value not in the array yet and so it will return undefined. Instead you can just use your lapTime value:

let lastItem = laps[laps.length - 1];
//let currentItem = laps[laps.length];
let currentItem = lapTime;

Example:

let isRunning = Boolean(true);
let lapContainer = [];

document.querySelector('#lap').addEventListener('click', () => lap());

function lap() {
    if (isRunning === true) {
        //initialize time
        let lapTime = start();
        //create connection to div
        lapContainer = document.getElementById("lapContainer");
        // how to check if they equal each other

        //create element
        const para = document.createElement("p");

        //how many laps have been created
        let i = document.getElementById("lapContainer").childElementCount;
        let index = [i];
        //create an index that will add an id to paragraph
        para.id = index;

        //add the lap to text
        para.innerText = lapTime;
        let laps = [];

        //laps = document.getElementById("lapContainer").childNodes[1].textContent;
        laps = Array.from(document.getElementById("lapContainer").childNodes).map(node => node.textContent);

        let lastItem = laps[laps.length - 1];
        //let currentItem = laps[laps.length];
        let currentItem = lapTime;

        document.getElementById("test").innerHTML = laps;
        if (currentItem !== lastItem) {
            lapContainer.appendChild(para);
        }
    }
}

const start = () => new Date().toString();

    <body>
        <!-- your content here... -->
        <div >
            <a href="timer.html" id="timer">Timer</a>
            <a href="alarm.html" id="alarm">Alarm</a>
        </div>
        <div >
            <div >
                <div >
                    <button type="button" id="start">START</button>
                    <button type="button" id="stop">STOP</button>
                    <button type="button" id="reset">RESET</button>
                    <button type="button" id="lap">LAP</button>
                    <button type="button" id="resetLaps">RESET LAPS</button>
                </div>

                <div >
                    <div >
                        <p id="textWrapper">
                            <span id="hours">00</span>:<span id="minutes">00</span>:<span
                                id="seconds"
                                >00</span
                            >
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div ></div>
        <div id="lapContainer" ></div>
        <p id="test"></p>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </body>