I am attempting to append a <img> element made in JavaScript into a <td>. What happens is the area where the image is meant to be expands slightly, but the image doesn't appear. the console gives me no error and i am truly baffled. Here is ALL of my code (Because i dont know what is causing the problem). I am also using the normalize css file and jquery in a local area.
Javascript
window.onload = function(){
var turn = 1;
document.title = "First Player";
var coolDown = 'False';
var makeScreen = function(){
var height = $(window).height();
var width = $(window).width();
$('#screen').height(height);
$('#screen').width(height);
var extraSpace = width - height;
var halfOfExtraSpace = extraSpace / 2;
$('#screen').css("left", halfOfExtraSpace);
};
var handleClickOne = function(){
drawImage('one');
};
var handleClickTwo = function(){
drawImage('two');
};
var drawImage = function(section){
if (turn == 1){
if (coolDown == 'False'){
drawCircle(section);
turn = 2;
document.title = "Second Player";
coolDown = 'True';
};
};
if (turn == 2){
if (coolDown == 'False'){
drawCross(section);
turn = 1;
document.title = "First Player";
coolDown = 'True';
};
};
coolDown = 'False';
};
var drawCircle = function(section){
alert('circle')
var circle = document.createElement("img");
circle.innerHTML = "src='Circle.png'"
$("#one").append(circle);
};
var drawCross = function(section){
alert('cross')
};
makeScreen();
var one = document.getElementById('one');
one.addEventListener('click', handleClickOne);
var two = document.getElementById('two');
two.addEventListener('click', handleClickTwo);
};
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="main.css">
<script src="jquery.js"></script>
<script src="main.js"></script>
<title>JavaScript Interaction Test.</title>
</head>
<body>
<table id="screen">
<tr>
<td id="one"></td>
<td id="two"></td>
<td id="three"></td>
</tr>
<tr>
<td id="four"></td>
<td id="five"></td>
<td id="six"></td>
</tr>
<tr>
<td id="seven"></td>
<td id="eight"></td>
<td id="nine"></td>
</tr>
</table>
</body>
</html>
CSS
body{
background-color: rgb(50, 50, 50)
}
td{
width: 0;
height: 0;
background-color: rgb(200, 200, 200);
border-style: solid;
border-width: 3px;
border-color: black;
}
#screen{
position: absolute;
left:0cm;
top:0cm;
}
Before replying or voting please take in consideration i am still a partial noob to some aspects of JavaScript and please take in consideration that i dont know everything you do even the basic things so dont down-vote me because it was a simple question.
Also, i have looked around the internet and stackoverflow and found no awnser thats relevent to helping me in the situation i am in now.
Thank you for your time.
Aucun commentaire:
Enregistrer un commentaire