I am trying to populate images into a table. It's like an image that would be a question and the other would be an image that would be an answer and they would be compared in a table. I tried to search online but could not find anything substantial.
<html>
<head>
<title>Game Selection</title>
<script type="text/javascript">
function gameddselected() {
var gamedd = document.getElementById('gamedd');
var x =document.getElementById('scoretable').rows
var a=x[0].cells
var b=x[1].cells
var c=x[2].cells
if (gamedd.value=='1') {
a[0].innerHTML="Game1 Score Table"
} else if (gamedd.value=='2') {
a[0].innerHTML="Game2 Score Table"
} else if (gamedd.value=='3') {
a[0].innerHTML="Game3 Score Table"
} else if (gamedd.value=='4') {
a[0].innerHTML="Game4 Score Table"
}
}
</script>
</head>
<body background="http://1.bp.blogspot.com/_68sk2PaFt3Q/Sl8n81IoRcI/AAAAAAAAEUw/AlnMPEC9uc0/s1600/Disable+File+Indexing+In+Windows++Speed+Up+Windows+By+Disabling+Search+Index+2.jpg" width="80%" height="80%">
<h2 style="text-align: center;">
<span style="font-size:18px;">
<span style="font-family: arial, helvetica, sans-serif;">Please select a Game
</span>
</span>
</h2>
<form action="" method="POST" name="form2">
<div align="center">Select:
<select name="gamedd" id="gamedd" style="width:200px" onChange="gameddselected()">
<option value="1">Game1</option><option value="2">Game2</option>
<option value="3">Game3</option><option value="4">Game4</option>
</select>
</div>
</form>
<TABLE BORDER="5" WIDTH="50%" CELLPADDING="4" CELLSPACING="3" ALIGN="CENTER" id="scoretable">
<TR>
<TH COLSPAN="3"><BR><H3>TABLE TITLE</H3></TH>
</TR>
<TR>
<TH>Question Images</TH>
<TH>Answer Images</TH>
<TH>Score</TH>
</TR>
<TR ALIGN="CENTER">
<TD>Data 1</TD>
<TD>Data 2</TD>
<TD>Data 2</TD>
</TR>
</TABLE>
</body>
</html>
I want an image to be produced in place of Data1 in the table. How can that be done?
Any help would be appreciated :)
HTML
<TABLE BORDER="5" WIDTH="50%" CELLPADDING="4" CELLSPACING="3" ALIGN="CENTER" id="scoretable">
<TR>
<TH COLSPAN="3"><BR><H3>TABLE TITLE</H3></TH>
</TR>
<TR>
<TH>Question Images</TH>
<TH>Answer Images</TH>
<TH>Score</TH>
</TR>
<TR ALIGN="CENTER">
<TD>Data 1</TD>
<TD>Data 2</TD>
<TD>Data 2</TD>
</TR>
</TABLE>
CODE using jquery and pseudo code
$("#gamedd").change(function(){
if selected == urCriteria then;
var img = $("<img />").attr('src', 'http://somedomain.com/image.jpg');
$(table tr:lastchild td:firstchild).append(img );
});
you can even load the image string url by using ajax call
HTML
<TR ALIGN="CENTER">
<TD id="Data1">Data 1</TD>
<TD id="Data2">Data 2</TD>
<TD id="Data3">Data 3</TD>
</TR>
Code
for(i=1;i<4;i++) {
x=document.getElementById("Data"+i);
x.innerHTML="<img src='/path/to/image"+i+".jpg' />";
// Assuming your images are named [something]NUMBER.jpg
// You could instead use an array
}
RESULT
<div>
<td id="Data1"><img src="/path/to/image1.jpg"></td>
<td id="Data2"><img src="/path/to/image2.jpg"></td>
<td id="Data3"><img src="/path/to/image3.jpg"></td>
</div>
Related
I try to change the index 0 by 1 at the start position in order to refresh the position in my td attribute; How can I change this?
$(document).ready(function() {
$('#sortable').sortable({
update: function(event, ui) {
var data = $(this).sortable("toArray", ui.item.attr("id"));
$(this).children().each(function(index) {
$(this).find('td.ordre').html(index + 1);
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<table id="players" name="players" class="table table-striped">
<thead>
<tr>
<td>N°</td>
<td>Nom</td>
<td>Prénom</td>
<td>N° licence</td>
</tr>
</thead>
<tbody id="sortable">
<tr id="1" data-position="1">
<td class="ordre">1</td>
<td>Name 1</td>
<td>Surname 1</td>
</tr>
<tr id="2" data-position="2">
<td class="ordre">2</td>
<td>Name 2</td>
<td>Surname 2</td>
</tr>
<tr id="3" data-position="3">
<td class="ordre">3</td>
<td>Name 3</td>
<td>Surname 3</td>
</tr>
</tbody>
</table>
I am trying to save cell entries of a randomly sorted HTML table to a variable in JavaScript. I am so far that I get a nodeliste of the first column at the click of a button. My question is, how can I convert this NodeListe into an array? I have tried different things like Array.prototype.slice.call (nl); inside the findOrder function (inside for declaration) but it does not seem to have been very successful, since the individual entries appear as an array instead of all the entries in one array.
Working code:
function randomSort()
{
var row = document.getElementById("sort").rows;
var rC = row.length;
var tableBody = document.getElementById("idforparentnode").parentNode;
for(i=0;i<rC;i++){
tableBody.insertBefore(row[Math.ceil(Math.random()*(rC-1))],row[i]);
}
}
function findOrder()
{
var orderlist = document.getElementsByClassName("order");
for (var i=0; i<orderlist.length; i++)
{
var nl = orderlist[i].innerHTML;
console.log(nl);
}
}
<!DOCTYPE html>
<html>
<title>Sort a HTML Table Randomly</title>
<body>
<p>Click the button to sort the table randomly:</p>
<p><button onclick="randomSort()">Shuffle Line 3-6</button></p>
<table border="1" id="myTable">
<thead>
<th style="display:none;"></th>
<th>Name</th>
<th>Current Exchange Rate</th>
</thead>
<tbody class="avoid-sort">
<tr>
<td class="order" style="display:none;">1</td>
<td>General Electric</td>
<td>19,57</td>
</tr>
<tr>
<td class="order" style="display:none;">2</td>
<td>Johnson & Johnson</td>
<td>119,14</td>
</tr>
</tbody>
<tbody id="sort">
<tr id="idforparentnode">
<td class="order" style="display:none;">3</td>
<td>Microsoft</td>
<td>65,92</td>
</tr>
<tr>
<td class="order" style="display:none;">4</td>
<td>Verizon</td>
<td>40,82</td>
</tr>
<tr>
<td class="order" style="display:none;">5</td>
<td>American Express</td>
<td>77,21</td>
</tr>
<tr>
<td class="order" style="display:none;">6</td>
<td>WhatSoEver</td>
<td>12,34</td>
</tr>
</tbody>
<tbody class="avoid-sort">
<tr>
<td class="order" style="display:none;">7</td>
<td>Apple</td>
<td>133,90</td>
</tr>
<tr>
<td class="order" style="display:none;">8</td>
<td>Nintendo</td>
<td>43,53</td>
</tr>
<tr>
<td class="order" style="display:none;">9</td>
<td>WhatEver</td>
<td>999,99</td>
</tr>
</tbody>
</table>
<br>
<input type="button" value="Display Order (based on standard order)" onclick="findOrder()">
<br>
<p>Display order of rows: </p>
<p id="orderdisplay"></p>
</body>
</html>
orderlist is actually an HTMLCollection. You can convert NodeList or HTMLCollection to an Array using spread element
function randomSort()
{
var row = document.getElementById("sort").rows;
var rC = row.length;
var tableBody = document.getElementById("idforparentnode").parentNode;
for(i=0;i<rC;i++){
tableBody.insertBefore(row[Math.ceil(Math.random()*(rC-1))],row[i]);
}
}
function findOrder()
{
var orderlist = [...document.getElementsByClassName("order")];
console.log(Array.isArray(orderlist));
for (var i=0; i<orderlist.length; i++)
{
var nl = orderlist[i].innerHTML;
console.log(nl);
}
}
<!DOCTYPE html>
<html>
<title>Sort a HTML Table Randomly</title>
<body>
<p>Click the button to sort the table randomly:</p>
<p><button onclick="randomSort()">Shuffle Line 3-6</button></p>
<table border="1" id="myTable">
<thead>
<th style="display:none;"></th>
<th>Name</th>
<th>Current Exchange Rate</th>
</thead>
<tbody class="avoid-sort">
<tr>
<td class="order" style="display:none;">1</td>
<td>General Electric</td>
<td>19,57</td>
</tr>
<tr>
<td class="order" style="display:none;">2</td>
<td>Johnson & Johnson</td>
<td>119,14</td>
</tr>
</tbody>
<tbody id="sort">
<tr id="idforparentnode">
<td class="order" style="display:none;">3</td>
<td>Microsoft</td>
<td>65,92</td>
</tr>
<tr>
<td class="order" style="display:none;">4</td>
<td>Verizon</td>
<td>40,82</td>
</tr>
<tr>
<td class="order" style="display:none;">5</td>
<td>American Express</td>
<td>77,21</td>
</tr>
<tr>
<td class="order" style="display:none;">6</td>
<td>WhatSoEver</td>
<td>12,34</td>
</tr>
</tbody>
<tbody class="avoid-sort">
<tr>
<td class="order" style="display:none;">7</td>
<td>Apple</td>
<td>133,90</td>
</tr>
<tr>
<td class="order" style="display:none;">8</td>
<td>Nintendo</td>
<td>43,53</td>
</tr>
<tr>
<td class="order" style="display:none;">9</td>
<td>WhatEver</td>
<td>999,99</td>
</tr>
</tbody>
</table>
<br>
<input type="button" value="Display Order (based on standard order)" onclick="findOrder()">
<br>
<p>Display order of rows: </p>
<p id="orderdisplay"></p>
</body>
</html>
I'm brand new to jquery and javascript and I'm trying to write a simple app that will, when I press a button, copy a row from one table to another and then delete the row from the first table. I have a DeleteRow function that works just fine, but I can't get my "DraftPlayer" function to copy the row. I've tried quite a few of the solutions I've found on the web, but I can't get the syntax just right. You'll see only the second row in the table has the DraftPlayer button as I work this out.
Here are the code snippets I think are critical:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
//<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div> </div>
<p>Welcome to Mike's Draft App! </p>
<table id="players">
<table border="1">
<tr>
<td width="36"> Rank </td>
<td width="141"> Player Name </td>
<td width="52">Position </td>
<td width="38">Team </td>
<td width="69"> Bye Week </td>
<td width="52"><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
</tr>
<tr>
<td>1</td>
<td>Antonio Brown</td>
<td>WR</td>
<td>PIT</td>
<td>8</td>
<td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
<td width="103"> </td>
</tr>
<tr>
<td>2</td>
<td>Julio Jones</td>
<td>WR</td>
<td>ATL</td>
<td>11</td>
<td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
<td><input type="button" value="Draft" onClick="DraftPlayer(this)"></td>
</tr>
<table id="drafted">
<table border="1">
<tr>
<td width="36"> Rank </td>
<td width="141"> Player Name </td>
<td width="52">Position </td>
<td width="38">Team </td>
<td width="69"> Bye Week </td>
</tr>
</table>
<script>
function DeleteRow(o) {
var p=o.parentNode.parentNode;
p.parentNode.removeChild(p);
}
function DraftPlayer(o) {
var p=o.parentNode.parentNode;
copyTable = $('#drafted tbody');
cloneRow = p.clone();
copyTable.append(cloneRow);
p.parentNode.removeChild(p);
}
</script>
</body>
</html>
Thanks for any suggestions!
You are selecting $('#drafted tbody'); which is not present in DOM at all so you will get nothing. You need to add tbody to your table or you need to change the selector.
<table id="drafted">
<tbody>
<tr>
<th width="36"> Rank </th>
<th width="141"> Player Name </th>
<th width="52">Position </th>
<th width="38">Team </th>
<th width="69"> Bye Week </th>
</tr>
</tbody>
</table>
function DraftPlayer(o) {
var p = $(o).closest('tr');
copyTable = $('#drafted tbody');
cloneRow = p.clone();
copyTable.append(cloneRow)
p.remove();
}
function DeleteRow(o) {
var p=o.parentNode.parentNode;
p.parentNode.removeChild(p);
}
function DraftPlayer(o) {
var p=o.parentNode.parentNode;
copyTable = $('#drafted tbody');
cloneRow = p.innerHTML;
//alert(cloneRow )
copyTable.append("<tr>"+cloneRow+"</tr>");
p.parentNode.removeChild(p);
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
//<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div> </div>
<p>Welcome to Mike's Draft App! </p>
<table id="players">
<table border="1">
<tr>
<td width="36"> Rank </td>
<td width="141"> Player Name </td>
<td width="52">Position </td>
<td width="38">Team </td>
<td width="69"> Bye Week </td>
<td width="52"><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
</tr>
<tr>
<td>1</td>
<td>Antonio Brown</td>
<td>WR</td>
<td>PIT</td>
<td>8</td>
<td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
<td width="103"> </td>
</tr>
<tr>
<td>2</td>
<td>Julio Jones</td>
<td>WR</td>
<td>ATL</td>
<td>11</td>
<td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
<td><input type="button" value="Draft" onClick="DraftPlayer(this)"></td>
</tr>
<table id="drafted" border="1">
<tr>
<td width="36"> Rank </td>
<td width="141"> Player Name </td>
<td width="52">Position </td>
<td width="38">Team </td>
<td width="69"> Bye Week </td>
</tr>
</table>
</body>
</html>
A lot of mistakes in your code. Go through my code ,I edited it, Works Fine
You need to convert the DOM Element to jquery object in order to use the clone() function.
The modified DraftPlayer() function is:
function DraftPlayer(o) {
var p=o.parentNode.parentNode;
copyTable = $('#drafted tbody');
cloneRow = $(p).clone();
copyTable.append(cloneRow);
p.parentNode.removeChild(p);
}
Suggestions:
There are some problem with your HTML also
Modify the table tag.
<table id="your_id" border="1">
<tbody>
-----------
-----------
</tbody>
</table>
<html>
<head>
<title>eLab</title>
<script type="text/javascript">
function change()
{
document.getElementById('myTable').style.height= "400";
document.getElementById('myTable').style.width= "1000";
return true;
}
</script>
</head>
<body>
<table border="1" cellpadding="1" cellspacing="1" style="height:1000;width:400;" id="myTable" align=center>
<tbody>
<tr>
<th>This is the head!</th>
<th>I'm the head too!</th>
</tr>
<tr>
<td align=center>Part 1</td>
<td align=center>Part 2</td>
</tr>
<tr>
<td align=center>Part 3</td>
<td align=center>Part 4</td>
</tr>
<tr>
<td colspan="2" align=center> Part 5</td>
</tr>
</tbody>
</table>
<center>
<input type="button" onclick="change()" value="Change It">
</center>
</body>
</html>
This is my html code.
After clicking the button, the table will change the height and width size.
I want to do this: after changing the size, if user clicks the button again, the table will change back to its original size or maybe it can change the size again as its original size.
Thank you!
If you accept css involved, you can use toggle to toggle certain class to achieve that.
And from, css length, 1000 is not a valid css value, you should use something like '1000px', otherwise the width/height would take no effect.
#myTable.changed {
width: 500px;
height: 300px;
}
<html>
<head>
<title>eLab</title>
<script type="text/javascript">
function change()
{
document.getElementById('myTable').classList.toggle('changed');
return true;
}
</script>
</head>
<body>
<!-- Note that the style you give here would not have an effect, as `height:1000` or `width:400` are not valid css length -->
<table border="1" cellpadding="1" cellspacing="1" style="height:1000;width:400;" id="myTable" align=center>
<tbody>
<tr>
<th>This is the head!</th>
<th>I'm the head too!</th>
</tr>
<tr>
<td align=center>Part 1</td>
<td align=center>Part 2</td>
</tr>
<tr>
<td align=center>Part 3</td>
<td align=center>Part 4</td>
</tr>
<tr>
<td colspan="2" align=center> Part 5</td>
</tr>
</tbody>
</table>
<center>
<input type="button" onclick="change()" value="Change It">
</center>
</body>
</html>
And if css is not in concern, then you can just use a flag to decide the behavior of that function, jsfiddle
<script type="text/javascript">
var changeFlag = false;
function change() {
var table = document.getElementById('myTable');
changeFlag = !changeFlag;
var width, height;
if (changeFlag) { // Click in odd, then change to new w/h
width = '500px';
height = '600px';
} else { // Click in even, change to origin size.
width = '400px';
height = '1000px';
}
table.style.width = width;
table.style.height = height;
return true;
}
</script>
<html>
<head>
<title>eLab</title>
<script type="text/javascript">
function change()
{
if(document.getElementById('myTable').style.height == "400px") {
document.getElementById('myTable').style.height= "1000";
document.getElementById('myTable').style.width= "400";
}
else {
document.getElementById('myTable').style.height= "400";
document.getElementById('myTable').style.width= "1000";
}
return true;
}
</script>
</head>
<body>
<table border="1" cellpadding="1" cellspacing="1" style="height:1000;width:400;" id="myTable" align=center>
<tbody>
<tr>
<th>This is the head!</th>
<th>I'm the head too!</th>
</tr>
<tr>
<td align=center>Part 1</td>
<td align=center>Part 2</td>
</tr>
<tr>
<td align=center>Part 3</td>
<td align=center>Part 4</td>
</tr>
<tr>
<td colspan="2" align=center> Part 5</td>
</tr>
</tbody>
</table>
<center>
<input type="button" onclick="change()" value="Change It">
</center>
</body>
</html>
I changed change function to work with your purpose.
Let you check this code
try this :
<html>
<head>
<title>eLab</title>
<script type="text/javascript">
var isToggled = false;
function toggleSize()
{
if(!isToggled)
{
document.getElementById('myTable').style.height= "400";
document.getElementById('myTable').style.width= "1000";
isToggled = true;
}
else
{
document.getElementById('myTable').style.height= "900";
document.getElementById('myTable').style.width= "400";
isToggled = false;
}
return true;
}
</script>
</head>
<body>
<table border="1" cellpadding="1" cellspacing="1" style="height:1000;width:400;" id="myTable" align=center>
<tbody>
<tr>
<th>This is the head!</th>
<th>I'm the head too!</th>
</tr>
<tr>
<td align=center>Part 1</td>
<td align=center>Part 2</td>
</tr>
<tr>
<td align=center>Part 3</td>
<td align=center>Part 4</td>
</tr>
<tr>
<td colspan="2" align=center> Part 5</td>
</tr>
</tbody>
</table>
<center>
<input type="button" onclick="toggleSize()" value="Change It">
</center>
</body>
</html>
Try this
.myTable1 {
height : 1000px;
width : 400px;
}
.myTable2 {
height : 400px;
width : 10000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
<title>eLab</title>
<script type="text/javascript">
function change(){
$('#myTable').toggleClass("myTable1");
$('#myTable').toggleClass("myTable2");
}
</script>
</head>
<body>
<table border="1" cellpadding="1" cellspacing="1" id="myTable" align="center" class="myTable1">
<tbody>
<tr>
<th>This is the head!</th>
<th>I'm the head too!</th>
</tr>
<tr>
<td align=center>Part 1</td>
<td align=center>Part 2</td>
</tr>
<tr>
<td align=center>Part 3</td>
<td align=center>Part 4</td>
</tr>
<tr>
<td colspan="2" align=center> Part 5</td>
</tr>
</tbody>
</table>
<center>
<input type="button" onclick="change()" value="Change It">
</center>
</body>
</html>
I was planning on making a personal project with JavaScript until I encountered a problem. I have a table that's "Invisible" with css "style.display=none" but when I try to make it "visible" I get "Uncaught TypeError: Cannot read property 'style' of null".
JavaScript Code below:
function attack(){
document.getElementById("list").style.display="block";
document.getElementById("message").innerHTML="";
}
function fire(){
var y=document.getElementById("message");
var x=document.getElementById("demo");
var z=document.getElementById("att");
x.innerHTML=3;
}
function disappear(){
document.getElementById("list").style.display="none";
document.getElementById("message").innerHTML="<center>Wild SlayerZach has appeared.</center>";
}
HTML below:
<body onload="disappear()">
<table border="1" >
<tr>
<td><img id="SHP" src="Hp/HPSlayerzach/hp2.png"/></td>
<td></td>
<td><img src="characters/slayerzach/slayerzach.png"/></td>
</tr>
<tr>
<td><p id="demo"></p></td>
<td ><img id="att" src="backgrounds/spacer1.png"/></td>
<td></td>
</tr>
<tr>
<td><img align="right" src="characters/fighterdan13/fighterDan13.gif"/></td>
<td></td>
<td><img id="FHP" src="hp/HPFighterdan13/hp1.png"/></td>
</tr>
<tr>
<td id="message" colspan="2" background="backgrounds/backgroundText.png">
<center><table border="0" id="list">
<tr>
<td style="font-family:verdana;font-size:15px"><center><a onclick="fire()">FIRE</a></center></td>
<td style="font-family:verdana;font-size:15px"><center>LIGHTNING</center></td>
</tr>
<tr>
<td style="font-family:verdana;font-size:15px"><center>WATER</center></td>
<td style="font-family:verdana;font-size:15px"><center>EARTH</center></td>
</tr>
</table></center>
</td>
<td>
<center><table border="0" background="backgrounds/backgroundmenu.png">
<tr>
<td><button id="butAtt" onclick="attack()">Attack</button></td>
<td><button id="butItems" disabled>Items</button></td>
</tr>
<tr>
<td colspan="2"><center><button id="butRun" style="width:110px; height:25px;" disabled>Run</button><center></td>
</tr>
</table></center>
</td>
</tr>
</table>
</body>
Demo FIDDLE
HTML
<body onload="disappear()">
<table border="1" >
<tr>
<td><img id="SHP" src="Hp/HPSlayerzach/hp2.png"/></td>
<td></td>
<td><img src="characters/slayerzach/slayerzach.png"/></td>
</tr>
<tr>
<td><p id="demo"></p></td>
<td ><img id="att" src="backgrounds/spacer1.png"/></td>
<td></td>
</tr>
<tr>
<td><img align="right" src="characters/fighterdan13/fighterDan13.gif"/></td>
<td></td>
<td><img id="FHP" src="hp/HPFighterdan13/hp1.png"/></td>
</tr>
<tr>
<td colspan="2" background="backgrounds/backgroundText.png">
<center><table border="0" id="list">
<tr>
<td style="font-family:verdana;font-size:15px"><center><a onclick="fire()">FIRE</a></center></td>
<td style="font-family:verdana;font-size:15px"><center>LIGHTNING</center></td>
</tr>
<tr>
<td style="font-family:verdana;font-size:15px"><center>WATER</center></td>
<td style="font-family:verdana;font-size:15px"><center>EARTH</center></td>
</tr>
</table></center>
<div id="message"></div>
</td>
<td>
<center><table border="0" background="backgrounds/backgroundmenu.png">
<tr>
<td><button id="butAtt" onclick="attack()">Attack</button></td>
<td><button id="butItems" disabled>Items</button></td>
</tr>
<tr>
<td colspan="2"><center><button id="butRun" style="width:110px; height:25px;" disabled>Run</button><center></td>
</tr>
</table></center>
</td>
</tr>
</table>
</body>
CODE
function attack(){
document.getElementById("list").style.display="block";
document.getElementById("message").innerHTML="";
}
function fire(){
var y=document.getElementById("message");
var x=document.getElementById("demo");
var z=document.getElementById("att");
x.innerHTML=3;
}
function disappear(){
document.getElementById("list").style.display="none";
document.getElementById("message").innerHTML="<center>Wild SlayerZach has appeared.</center>";
}
Problem was you replace the message innerhtml on disappear.it remove the table which have id list.so i create div with id message inside the td and remove message id from the td.
The error is with 'document.getElementById("message").innerHTML="";'.There is no element by Id 'message'.Remove it,it works perfectly
The other best practice is to always check whether the element exists in the DOM:
something like below:
if(document.getElementById("message")){
document.getElementById("list").style.display="none";
document.getElementById("message").innerHTML="<center>Wild SlayerZach has appeared</center>";
}
try dont use display:none through Javascript but from css, here is the example from your code i modify it a bit on link below
HTML Code
<body>
<td id="message" colspan="2" background="backgrounds/backgroundText.png" >
<table border="0" id="list" style="display:none;">
<tr>
<td style="font-family:verdana;font-size:15px"><center><a onclick="fire()">FIRE</a></center></td>
<td style="font-family:verdana;font-size:15px"><center>LIGHTNING</center></td>
</tr>
<tr>
<td style="font-family:verdana;font-size:15px"><center>WATER</center></td>
<td style="font-family:verdana;font-size:15px"><center>EARTH</center></td>
</tr>
</table>
<button id="butAtt" onclick="attack()">Attack</button>
Javascript
function attack(){
document.getElementById("list").style.display="block";
document.getElementById("message").innerHTML="";
}
jsfiddle