Style.display block/none problems - javascript

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

Related

How to grab a specific text value from a big text or html file [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I would want to get only the path value form the below text/html. Actually it contains 10k lines, it would be very difficult to manually take the all path values. Is this possible to get the only path values through regex or through excel or any other possible way?
I would want to grab and take all the path value alone from the href attribute
<table>
<tbody>
<tr>
<th>account</th>
<th>size</th>
<th>nodes</th>
<th>props</th>
<th></th>
</tr>
<tr>
<td>course-products</td>
<td class="number">955MB</td>
<td class="number">80607</td>
<td class="number">549393</td>
<td width="100%">
<table style="border: none;" width="100%">
<tbody>
<tr>
<td style="border-width:1;width:58%" class="bar"></td>
<td style="border: none; width:42%"><b>58%</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>silverthorn-7e-info</td>
<td class="number">83.5MB</td>
<td class="number">149</td>
<td class="number">778</td>
<td width="100%">
<table style="border: none;" width="100%">
<tbody>
<tr>
<td style="border-width:1;width:5%" class="bar"></td>
<td style="border: none; width:95%"><b>5%</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>sanders-2e-info</td>
<td class="number">45.5MB</td>
<td class="number">9609</td>
<td class="number">67184</td>
<td width="100%">
<table style="border: none;" width="100%">
<tbody>
<tr>
<td style="border-width:1;width:3%" class="bar"></td>
<td style="border: none; width:97%"><b>3%</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>davidson-10e-info</td>
<td class="number">39MB</td>
<td class="number">53</td>
<td class="number">288</td>
<td width="100%">
<table style="border: none;" width="100%">
<tbody>
<tr>
<td style="border-width:1;width:2%" class="bar"></td>
<td style="border: none; width:98%"><b>2%</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
In javascript, with .each, you can do something like that
$( "tr" ).each(function( index ) {
let ahref = $(this).find('a').attr('href');
console.log(ahref);
});
You can do either use JavaScript or jQuery both to achieve the results you are after.
Using jQuery way
You can use $.each along with href to get the a elements hrefs only from your table.
Also, to target the a only - We can use jQuery Descendant Selector like this below.
$("table tr > td > a").each(function(i, el) {
console.log(el.href) //get a href only
});
Live Demo:
$("table tr > td > a").each(function(i, el) {
console.log(el.href) //get a href only
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th>account</th>
<th>size</th>
<th>nodes</th>
<th>props</th>
<th></th>
</tr>
<tr>
<td>course-products</td>
<td class="number">955MB</td>
<td class="number">80607</td>
<td class="number">549393</td>
<td width="100%">
<table style="border: none;" width="100%">
<tbody>
<tr>
<td style="border-width:1;width:58%" class="bar"></td>
<td style="border: none; width:42%"><b>58%</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>silverthorn-7e-info</td>
<td class="number">83.5MB</td>
<td class="number">149</td>
<td class="number">778</td>
<td width="100%">
<table style="border: none;" width="100%">
<tbody>
<tr>
<td style="border-width:1;width:5%" class="bar"></td>
<td style="border: none; width:95%"><b>5%</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>sanders-2e-info</td>
<td class="number">45.5MB</td>
<td class="number">9609</td>
<td class="number">67184</td>
<td width="100%">
<table style="border: none;" width="100%">
<tbody>
<tr>
<td style="border-width:1;width:3%" class="bar"></td>
<td style="border: none; width:97%"><b>3%</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>davidson-10e-info</td>
<td class="number">39MB</td>
<td class="number">53</td>
<td class="number">288</td>
<td width="100%">
<table style="border: none;" width="100%">
<tbody>
<tr>
<td style="border-width:1;width:2%" class="bar"></td>
<td style="border: none; width:98%"><b>2%</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
Using only Pure JavaScript way
You can use querySelectorAll method along with forEach method to get the href as well from the a
const el = document.querySelectorAll('table tr > td > a')
el.forEach(function(el, i) {
console.log(el.href) //get a href only
})
Live Demo:
const el = document.querySelectorAll('table tr > td > a')
el.forEach(function(el, i) {
console.log(el.href) //get a href only
})
<table>
<tbody>
<tr>
<th>account</th>
<th>size</th>
<th>nodes</th>
<th>props</th>
<th></th>
</tr>
<tr>
<td>course-products</td>
<td class="number">955MB</td>
<td class="number">80607</td>
<td class="number">549393</td>
<td width="100%">
<table style="border: none;" width="100%">
<tbody>
<tr>
<td style="border-width:1;width:58%" class="bar"></td>
<td style="border: none; width:42%"><b>58%</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>silverthorn-7e-info</td>
<td class="number">83.5MB</td>
<td class="number">149</td>
<td class="number">778</td>
<td width="100%">
<table style="border: none;" width="100%">
<tbody>
<tr>
<td style="border-width:1;width:5%" class="bar"></td>
<td style="border: none; width:95%"><b>5%</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>sanders-2e-info</td>
<td class="number">45.5MB</td>
<td class="number">9609</td>
<td class="number">67184</td>
<td width="100%">
<table style="border: none;" width="100%">
<tbody>
<tr>
<td style="border-width:1;width:3%" class="bar"></td>
<td style="border: none; width:97%"><b>3%</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>davidson-10e-info</td>
<td class="number">39MB</td>
<td class="number">53</td>
<td class="number">288</td>
<td width="100%">
<table style="border: none;" width="100%">
<tbody>
<tr>
<td style="border-width:1;width:2%" class="bar"></td>
<td style="border: none; width:98%"><b>2%</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>

JQuery: Uncaught SyntaxError: Invalid or unexpected token

I am also using socket.io. There is an HTML table, and when a user clicks a button, my code is supposed to replace that table with a new one, however it gives the error message in the title.
Here is my code:
HTML:
<table>
</tbody>
<tr>
<td class="1"></td>
<td class="2"></td>
<td class="3"></td>
</tr>
<tr>
<td class="4"></td>
<td class="5"></td>
<td class="6"></td>
</tr>
<tr>
<td class="7"></td>
<td class="8"></td>
<td class="9"></td>
</tr>
</tbody>
</table>
JQuery script:
socket.on('resetGranted', function() {
$('table').replaceWith('<table> //says error is here
</tbody>
<tr>
<td class="1"></td>
<td class="2"></td>
<td class="3"></td>
</tr>
<tr>
<td class="4"></td>
<td class="5"></td>
<td class="6"></td>
</tr>
<tr>
<td class="7"></td>
<td class="8"></td>
<td class="9"></td>
</tr>
</tbody>
</table>');
})
How do I fix this?
Use backtick ` for multiline string
console.log(`
multi
line
string
here
`);
socket.on('resetGranted', function() {
var htmlContent='<table>
</tbody>
<tr>
<td class="1"></td>
<td class="2"></td>
<td class="3"></td>
</tr>
<tr>
<td class="4"></td>
<td class="5"></td>
<td class="6"></td>
</tr>
<tr>
<td class="7"></td>
<td class="8"></td>
<td class="9"></td>
</tr>
</tbody>
</table>';
$('table').replaceWith(htmlContent);
})

Javascript store table in a variable with conditions

This is how my page looks like:
<div class="bgSmTitle smTitle">Customer Addresses</div>
<table class="bgLtTable">
<tr>
<td class="bgLtRow1 padded">New York</td>
</tr>
<tr>
<td class="bgLtRow1 padded">Osaka</td>
</tr>
<tr>
<td class="bgLtRow1 padded">Los Angeles</td>
</tr>
</table>
<div class="bgSmTitle smTitle">Family Members</div>
<table class="bgLtTable">
<tr>
<td class="bgHeader1 padded" style="width:24%;">Name</td>
<td class="bgHeader2 padded" style="width:10%;">Relationship</td>
<td class="bgHeader1 padded" style="width:30%;">Age</td>
</tr>
<tr>
<td class="bgLtRow1 padded">Jordan</td>
<td class="bgLtRow2 padded">Father</td>
<td class="bgLtRow1 padded">58</td>
</tr>
</table>
I would like to store the tables with class name bgLtTable. These table can appear up to 3-4 times in this page. Is it possible to get the specific table using the div above it? Something like:
var tableAddress = div.innerHtml="Customer Addresses".table.bgLtTable;
var tableMembers = div.innerHtml="Family Members".table.bgLtTable;
Maybe try to use document.getElementsByTagName("TABLE");
This will give you an object that is accessible via index
You can then assign those elements to a variable and loop through it but look where the class attribute is equal to className for example
var element = document.getElementsByTagName("TABLE");
for (var i = 0; element.length > i; i++)
{
var elementClass = element[i].getAttribute('class');
}
I am not 100% sure this answers your question how I understand is you just want to get the class.
I hope this helps I am also pretty new to coding but always willing to help if I can.
var CustomerAddressesTable = $('div.smTitle:contains("Customer Addresses")').next('.bgLtTable');
console.log($("<div />").append($(CustomerAddressesTable).clone()).html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="prnt">
<td>
<div class="bgSmTitle smTitle">Customer Addresses</div>
<table class="bgLtTable">
<tr>
<td class="bgLtRow1 padded">New York</td>
</tr>
<tr>
<td class="bgLtRow1 padded">Osaka</td>
</tr>
<tr>
<td class="bgLtRow1 padded">Los Angeles</td>
</tr>
</table>
</td>
</tr>
<tr class="prnt">
<td colspan="3">
<div class="bgSmTitle smTitle">Family Members</div>
<table class="bgLtTable">
<tr>
<td class="bgHeader1 padded" style="width:24%;">Name</td>
<td class="bgHeader2 padded" style="width:10%;">Relationship</td>
<td class="bgHeader1 padded" style="width:30%;">Age</td>
</tr>
<tr>
<td class="bgLtRow1 padded">Jordan</td>
<td class="bgLtRow2 padded">Father</td>
<td class="bgLtRow1 padded">58</td>
</tr>
</table>
</td>
</tr>
</table>
This method will give you the html of the required table.

How to pass html div id's dynamically to js function

I want to pass the div id from html to a js script dynamically
as such div id r1,r2,r3 needs to be passed in to the getElementById() in jS,so when user mouse over any div,it will get rotated automatically.
This is my first Question,if any Corrections suggested are welcome!
<tbody>
<tr>
<td id="r1"> Roboust</td>
<td id="r2">Dynamic</td>
<td id="r3">Adhere</td>
</tr>
<tr>
<td id="r4">Popular</td>
<td id="r5">Trending</td>
<td id="r6">Favourite</td>
</tr>
<tr>
<td id="r7">Famous</td>
<td id="r8">Blockbouster</td>
<td id="r9">Navie</td>
</tr>
</tbody>
</table>
<h1>CLICK ON BUTTONS TO ROTATE THE BUTTON AS YOU WANT THEM</h1>
<button onclick="rotate() ">Flip Row1</button>
<script>
var rotate = function() {
document.getElementById('r1').style="transform:rotateX(180deg);transition: 0.6s;transform-style:preserve-3d";
}
</script>
</body>
Edited my answer
<html>
<body>
<table>
<tbody>
<tr>
<td id="r1" onmouseover="rotate(this)"> Roboust</td>
<td id="r2" onmouseover="rotate(this)">Dynamic</td>
<td id="r3" onmouseover="rotate(this)">Adhere</td>
</tr>
<tr>
<td id="r4" onmouseover="rotate(this)">Popular</td>
<td id="r5" onmouseover="rotate(this)">Trending</td>
<td id="r6" onmouseover="rotate(this)">Favourite</td>
</tr>
<tr>
<td id="r7" onmouseover="rotate(this)">Famous</td>
<td id="r8" onmouseover="rotate(this)">Blockbouster</td>
<td id="r9" onmouseover="rotate(this)">Navie</td>
</tr>
</tbody>
</table>
<script>
var rotate = function(x) {
if(x.className == "rotated"){
x.style="transform:rotateX(0deg);transition: 0.6s;transform-style:preserve-3d";
x.className = "";
}
else{
x.style="transform:rotateX(180deg);transition: 0.6s;transform-style:preserve-3d";
x.className = "rotated";
}
}
</script>
</body>
</html>
you have several errors try it like this
<table>
<tr>
<td id="r1" onmouseover="rota(r1)"> Roboust</td>
<td id="r2" onmouseover="rota(r2)">Dynamic</td>
<td id="r3" onmouseover="rota(r3)">Adhere</td>
</tr>
</table>
<script>
function rota(i) {
var x = document.getElementById(i);
x.style.transform="rotateX(180deg)";
x.style.transition='0.6s';
}
</script>
</body>
You can also try this way -
<table id="myTable">
<tbody>
<tr>
<td id="r1"> Roboust</td>
<td id="r2">Dynamic</td>
<td id="r3">Adhere</td>
</tr>
<tr>
<td id="r4">Popular</td>
<td id="r5">Trending</td>
<td id="r6">Favourite</td>
</tr>
<tr>
<td id="r7">Famous</td>
<td id="r8">Blockbouster</td>
<td id="r9">Navie</td>
</tr>
</tbody>
</table>
<script>
document.getElementById('myTable').onmouseover = function(event) {
if (event.target.tagName.toUpperCase() == "TD") {
event.target.style = "transform:rotateX(180deg);transition: 0.6s;transform-style:preserve-3d";
}
}
</script>

How to move table to the top of the DIV container based on a Condition with JQuery?

I have multiple tables stacked inside a div container as below:-
<div id="myContent" style="display: block;">
<table id="myTable" cellspacing="0" cellpadding="0" >
<tbody>
<tr>
<td style="padding-top: 10px;">
<table>
<tbody>
<tr>
<td align="left">
Health Care
</td>
</tr>
<tr>
<td align="left">
20 Wisconsin Ave</td>
</tr>
<tr>
<td align="left">
641.235.5900
</td>
</tr>
<tr>
<td align="left">
No website
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">
<img src="images/phone.png" class="imgHeader" >
</td>
</tr>
</tbody>
</table>
<table id="myTable" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-top: 10px;">
<table >
<tbody>
<tr>
<td align="left">Housing</td>
</tr>
<tr>
<td align="left">
N/A</td>
</tr>
<tr>
<td align="left">
641.255.3884
</td>
</tr>
<tr>
<td align="left">
www.housingl.org
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">
<img src="images/phone.png" class="imgHeader" >
</td>
</tr>
</tbody>
</table>
<table id="myTable" cellspacing="0" cellpadding="0" >
<tbody>
<tr>
<td style="padding-top: 10px;">
<table>
<tbody>
<tr>
<td align="left">
Employment</td>
</tr>
<tr>
<td align="left">N/A</td>
</tr>
<tr>
<td align="left">
641.743.0500
</td>
</tr>
<tr>
<td align="left">
http://www.noexperience.org
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">
<img src="images/phone.png" class="imgHeader" >
</td>
</tr>
</tbody>
</table>
</div>
I am trying to run a condition to find the TD with N/A and move those tables to the top. This is an additional question bult on the top of my previous question:
Finding the text "N/A" and hiding an image in table's next TD
I have a starting trouble with this code. Any support is appreciated.
$('td:contains(N/A)').closest('table').prependTo('#myContent');
jsFiddle example
$('td').each(function(){
if ($(this).text() === 'N/A') {
$(this).parents('table').detach().prependTo('#myContent');
}
});

Categories