Blinking Cursor Effect with JS

Hi!

I’m trying to create a blinking text cursor effect on a webpage with JS but I can’t get it to work. I know I can do this purely with CSS but I’d really like to nail this bit of JS. I’ve had a good google and tried everything suggested other than using JQuery which we haven’t yet covered in the course I’m doing.

Specifically, I’m trying to get the border-right property of my h1 to disappear and reappear periodically. As you can see, the border is loaded initially by the CSS and is then deleted by the JS but does not reappear thereafter. HTML, CSS and JS below.

Thanks for reading!

<!DOCTYPE html>

<html>

    <head>

        <title>Steve's Portfolio</title>

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

        <link rel="preconnect" href="https://fonts.googleapis.com">

        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

        <link href="https://fonts.googleapis.com/css2?family=Dosis&family=Pinyon+Script&family=Playfair+Display&display=swap" rel="stylesheet">

    </head>

    <body>

        <header>

            <div id="banner">

                <h1 class="myname">Steve Bytheway</h1>

                <nav>

                    <ul>

                        <li>Home</li>

                        <li>About</li>

                        <li>Projects</li>

                        <li>Contact</li>

                    </ul>

                </nav>

            </div>

            <img src="steve1.jpeg" alt="Me at the Cannes Film Festival" width="225px" height="300px">

        </header>

        <main>

            <h2>About Me</h2>

            <p>Hi! I'm Steve, a 28 year old hospitality manager who's looking to switch careers. I heard web devs get to sit in a chair all day and I signed up immediately. I'm currently in the process of completing the Codecademy full stack developer course as a part of ITCareerSwitch's coding programme.  </p>

            <h2>Projects</h2>

            <p>Ain't done none yet guvnor.</p>

        </main>

    </body>

    <footer>

    </footer>

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

</html>
* {

    border: 0;

    padding: 0;

}

#banner {

    display: flex;

    justify-content: space-between;

    align-items: baseline;

    width: 100%;

    background-color: #557a95;

    color: #b1a296;

}

nav {

    width: 25%;

    position: relative;

    right: 2%;

}

nav ul {

    display: flex;

    justify-content: space-between;  

}

nav li {

    display: inline;

    margin: 3%;

    font-family: Dosis;

    font-size: 130%;

    border: 1px solid #b1a296;

    padding: 2%;

}

h1 {

    font-family: "Playfair Display";

    font-size: 300%;

    font-weight: 350;

    position: relative;

    left: 1.5%;

    border-bottom: #b1a296 1px solid;

    border-right: #b1a296 3px solid;

    padding-right: 3%;

}

main {

    background-color: #7ea3bd;

}
const myname = document.querySelector(".myname");

setInterval(() => {

    if(myname.style.borderRight = "#b1a296 3px solid") {

        myname.style.borderRight = "none";

    } else {

        myname.style.borderRight = "#b1a296 3px solid";

    }

}, 400);

I managed to figure out a solution!

I think the original JS script didn’t work because of the inital “if” statement.

if(myname.style.borderRight = "#b1a296 3px solid") does not actually check if border-right has the properties of being #b1a296, 3px and solid. It checks specifically if the style property of border-right is identical to the string #b1a296 3px solid. If the style property is a different string, eg solid 3px b1a296, the “if” statement will evaluate to false.

By declaring a new boolean variable and using that as the basis for the toggle, we overcome this problem.

Working code posted below!

const myname = document.querySelector(".myname");

let showBorder = true;

setInterval(() => {

    if(showBorder) {

        myname.style.borderRight = "none";

        showBorder = false;

    } else {

       

        myname.style.borderRight = "#b1a296 3px solid";

        showBorder = true;

    }

}, 550);