I have JavaScript but it’s not working. the files are all in the same folder.
Heres my code:
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<title>Lesson on Coding</title>
</head>
<body>
<div class="board">
<h2>Tic Tac Toe</h2>
<div id="row-1">
<div onclick="play(this)";"></div>
<div onclick="play(this)";"></div>
<div onclick="play(this)";"></div>
</div>
<div id="row-1">
<div onclick="play(this)";"></div>
<div onclick="play(this)";"></div>
<div onclick="play(this)";"></div>
</div>
<div id="row-1">
<div onclick="play(this)";"></div>
<div onclick="play(this)";"></div>
<div onclick="play(this)";"></div>
</div>
</div>
</body>
<script src="js.js"></script>
</html>
body {
background-color: orange;
width: 1000px;
margin: 10px auto;
text-align: center;
}
div.board h2 {
height: 150px;
font-size: 55px;
}
div[id^="row"] div {
width: 200px;
height: 200px;
border: 2px solid red;
float: left;
box-sizing: border-box;
}
div [id^="row"] {
clear: both;
}
div.board {
width: 603px;
margin: 0 auto;
}
span {
font-size: 55px;
padding-top: 20px;
}
div[id^="row"] div:first-child {border-left: none;};
div[id^="row"] div:last-child {border-right: none;};
div[id="row1"] div{border-top: none;};
div[id="row3"] div{border-bottom: none;};
function play(clickedDiv) {
clickedDiv.innerHTML ="<span>X</span>";
}