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

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 139982

Trending Articles



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