I have a small assignment where I am required to make a continuous list using multiple languages (php, js, css). However, as seen in the image, once the js script gets called, it doesn't follow the continuous striped design of the list. I am using nth-child(odd) to create this design pattern, but no matter where I place the js script it continues to behave incorrectly. Why is the js script not continuing the pattern, and how can I fix this issue?
Thanks in advance.
php:
<!DOCTYPE html> <html> <head> <title>Assignment</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="card"> <ul id="item-list"> <?php for ($i = 1; $i < 4; $i++) { ?> <li><?php echo "php " . $i; ?></li> <?php } ?> <script src="list_v2.js"></script> <li>CSS 1</li> <li>CSS 2</li> <li>CSS 3</li> </ul> </div> </body> </html> js:
var ul = document.getElementById("item-list"); for(let i=1; i<4; i++){ var li = document.createElement('li'); li.innerHTML = "JavaScript " + i; ul.appendChild(li); } css:
ul { list-style-type: none; background-color: #fff; color: #111; } li { padding: 1rem; text-align: center; color: #808080; } li:nth-child(odd) { background-color: #ece2e1; } 
没有评论:
发表评论