Currently, I am working on a simple page for practice purposes. The main issue I am facing is with a div element that has a red border and a blue background. Inside the div, there is a script tag calling an external JavaScript file. Surprisingly, the JavaScript code works fine but it makes the border of the div disappear.
Below is the code snippet:
var myArray = [
"Item one",
"Item two",
"Item three"
];
var randomItemOne = myArray[Math.floor(Math.random() * myArray.length)];
document.body.innerHTML = randomItemOne;.box1 {
border: solid 2px red;
width: 200px;
height: 150px;
background-color: skyblue;
}HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Random Text Selector</title>
<meta name="description" content="The HTML5 Herald">
<link rel="stylesheet" href="rt_style.css">
</head>
<body>
<div class="box1">
<script src="js/random.js"></script>
</div>
</body>
</html>