Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 140584

How do I display the value of the square's id when hovering over it only?

$
0
0

I am not allowed to use any html in this assignment. Here is what I have so far in java:

document.addEventListener("DOMContentLoaded", function () {

    let button = document.createElement('button');
    let btnText = document.createTextNode('Add Square');
    button.appendChild(btnText);
    document.body.appendChild(button);

    let sqContainer = document.createElement('div');
    sqContainer.classList.add('container')
    document.body.appendChild(sqContainer)

    let num = 0

    button.addEventListener("click", function () {
        let square = document.createElement('div')
        square.classList.add('square')
        sqContainer.appendChild(square)
        document.body.appendChild(sqContainer)
        num++
        square.setAttribute('id', num)

        let idDisplay = document.createElement('span')
        idDisplay.classList.add('id-display')
        idDisplay.innerText = num
     })
})

This creates boxes that go across the screen horizontally until they reach the end of the page which they then wrap around which i have archived using flex box. Here is my css:

.container {
    display: flex;
    flex-wrap: wrap;
}

.square {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    margin-right: 10px;
    margin-top: 10px;
    background-color: purple;
}

.square:hover {
   display: num;
}

Here is the instructions verbatim: When hovering over a square, the value of the square's id should display centered in the square, and disappear when the cursor is no longer over the square


Viewing all articles
Browse latest Browse all 140584

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>