HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Game</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="script.js"></script>
</head>
<body>
<div class="container">
<table class="table ">
<tr>
<td id="1">a</td>
<td id="2">a</td>
<td id="3">a</td>
<td id="4">a</td>
</tr>
<tr>
<td id="5">a</td>
<td id="6">a</td>
<td id="7">a</td>
<td id="8">a</td>
</tr>
<tr>
<td id="9">a</td>
<td id="10">a</td>
<td id="11">a</td>
<td id="12">a</td>
</tr>
<tr>
<td id="13">a</td>
<td id="14">a</td>
<td id="15">a</td>
<td id="16">a</td>
</tr>
</table>
</div>
</body>
function startFunction() {
var table = document.querySelector('#table');
var table_cells = table.querySelectorAll('td');
}
window.onload = function() {
startFunction();
};
I keep getting an error of "uncaught typeError: cannot read property 'querySelectorAll' of null."
I think this has to do with the fact when I'm calling a function that tries to grab said element node before it exists perhaps?
I'm loading my Javascript file in the <head> section of my HTML file so I added a window.onload function to make sure everything is loaded before the page runs. However, I still keep getting this error.
Take a look at this line in your JavaScript:
var table = document.querySelector('#table');
The pound-sign indicates an ID, and so your javascript is looking for an element with the ID of "table".
But, if you look at your table, it doesn't have an ID; only class.
The solution is to give your <table> an ID of "table" so that the javascript properly finds it:
<table id="table">
The table is missing id attribute. Instead, it has class attribute. Fix by adding id
<table class="table" id="table">
Or modify your query selector to select by class:
var table = document.querySelector('.table');
Related
I am using a asp.net mvc web app. I have created a table and now I am wanting to use the plugin in datatables. I saw you only needed 3 lines of code to make this work. I attempted to do exactly what it required in order for it to work and give me the desired datatable, but it does not give me the table I am expecting. I even went to examples -> HTML (DOM) source data -> and under Javascript tab I entered the lines required.
Is there something I am doing incorrect here with the script tags or is the plug in just not working? I do not have the files downloaded and imported to my project.
Expecting a standard look like this
But am getting this... so I am missing the look of the datatable plugin and the following Error.
Cannot set properties of undefined (setting '_DT_CellIndex')
my view:
#model List<Fright>
#{
ViewData["Title"] = "Home Page";
var result = Model.GroupBy(gb => gb.Value);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="//cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js" defer></script>
<script>
$(document).ready(function () {
$('#homeTable').DataTable();
});
</script>
</head>
<body>
<div>
<table id="homeTable" class="display" style="width:100%">
<thead>
<tr>
<th>Value</th>
<th>Option</th>
</tr>
</thead>
<tbody>
#foreach (var item in result)
{
var url = "/frightSummary/SummaryIndex?id=" + item.Key;
<tr>
<td>
<a href=#url>#item.Key</a>
</td>
</tr>
}
</tbody>
</table>
</div>
</body>
</html>
Your problem is a mismatch in the number of <td> </td>. You are just rendering 1 <td> in foreach loop but you have two <th></th> in the table header
#model List<Fright>
#{
ViewData["Title"] = "Home Page";
var result = Model.GroupBy(gb => gb.Value);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="//cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js" defer></script>
<script>
$(document).ready(function () {
$('#homeTable').DataTable();
});
</script>
</head>
<body>
<div>
<table id="homeTable" class="display" style="width:100%">
<thead>
<tr>
<th>Value</th>
<th>Option</th>
</tr>
</thead>
<tbody>
#foreach (var item in result)
{
var url = "/frightSummary/SummaryIndex?id=" + item.Key;
<tr>
<td>
<a href=#url>#item.Key</a>
</td>
<td>
<a href=#url>#item.Option</a> /* output you Option value*/
</td>
</tr>
}
</tbody>
</table>
</div>
</body>
</html> ```
is there something wrong with the code below
Just trying to fix decimal paces for a specific class of td.
need to use only jquery
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<td class="go"> 25.252525
</td>
<script type="text/javascript">
$('.go').each(function() {
return parseFloat($(this).toFixed(2));
}
</script>
</body>
</html>
You need to use .text() to get text from td then use .toFixed() and finally change updated value inside your td i.e : $(this).text(parseFloat($(this).text()).toFixed(2));
Demo Code :
$('.go').each(function() {
$(this).text(parseFloat($(this).text()).toFixed(2)); //change text..
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<table>
<tr>
<td class="go"> 25.252525
</td>
</tr>
<tr>
<td class="go"> 25.2223525
</td>
</tr>
</table>
My JS code looks like this. But when I open the page it says "Uncaught TypeError: Cannot set property 'innerHTML' of null"
I tried to change the NewItem constructor to a function. But VSC keeps saying I should declare it as a class instead. I converted it in the first place because the constructor wasn't working as a function either.
class NewItem {
constructor(name, date, price) {
this.itemName = name;
this.itemDate = date;
this.itemPrice = price;
}
}
const onListItem = new NewItem("John", "Date", "Price");
document.getElementById("demo").innerHTML = onListItem.itemDate;
HTML looks like this
<!DOCTYPE html>
<html lang= "en">
<head>
<link rel="stylesheet" href="ShopListStyle.css">
<meta name="viewport" content="width=device-width" initial-scale=1.0>
<title>Shopping List</title>
</head>
<body>
<script src="ShopListScript.js"></script>
<div id="container">
<div id="inputbox" class="section">
<form id="labels-form">
<label><h2>Shopping List</h2></label>
<input id="labels-name" class="labels-input" type="text" value="Item Name"></input>
<input id="labels-date" class="labels-input" type="text" value="Date of Purchase"></input>
<input id="labels-price" class="labels-input" type="text" value="Item Price"></input>
<button id="labels-button">Add to List</button>
<p id="demo"></p>
</form>
</div>
<div id="shopListBox" class="section">
<!--Need to add a delete button/ Maybe a quantity button down the road-->
<table id="shopList">
<caption><h2>Spending List</h2></caption>
<thead id="table-header">
<tr>
<th class="table-header" id="table-name">name</th>
<th class="table-header" id="table-date">date</th>
<th class="table-header"id="table-price">price</th>
<th class="table-header" id="table-delete">delete</th>
</tr>
</thead>
<tbody id="table-body">
<tr class="newRow">
<td class="new-item" id="item-name">item</td>
<td class="new-item" id="item-date">item</td>
<td class="new-item" id="item-price">item</td>
<td class="new-item"><button class="item-button">Delete</button></td>
</tr>
</tbody>
<tfoot id="table-footer">
<tr>
<td id="item-price-sum" colspan="4" style="width: 100%" >Sum of Prices</td>
</tr>
</tfoot>
</table>
<!--The sum of all the prices will go somewhere here-->
</div>
</div>
</body>
</html>
Your JavaScript code is trying to access this element with id demo (<p id="demo"></p>):
document.getElementById("demo").innerHTML = onListItem.itemDate;
Your script is added at the opening body tag...
<body>
<script src="ShopListScript.js"></script>
...
...which means the demo element does not exist yet.
Solution: Put your script before the closing body tag:
...
<script src="ShopListScript.js"></script>
</body>
</html>
You can also try to set
<script src="ShopListScript.js" defer="defer"></script>
Because javascript will block the DOM rendering, so we should put in the end of
like Peter Krebs's answer:
...
<script src="ShopListScript.js"></script>
</body>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 years ago.
My file which is called 'table.htm' (trying to make a table) is below:
<!DOCTYPE html>
<html lang="en-AU">
<head>
<script type="text/javascript">
var thOne = document.getElementById("thOne");
alert(thOne)
//thOne.innerHTML = String(thOne.value);
</script>
</head>
<body>
<table>
<tbody>
<tr id="trOne">
<th value="1" id="thOne">
</th>
<td value="" id="tdOne">
</td>
</tr>
</tbody>
</table>
</body>
</html>
It shouldn't alert null, but it does.
The commented out line should set id("thOne").innerHTML to it's value (1 in a string) but instead says it does not have a value (as TypeError). I know that, but how do I set the innerHTML to '1'?
You can get the element after body loaded.
e.g.
<!DOCTYPE html>
<html lang="en-AU">
<head>
<script type="text/javascript">
function bodyLoad() {
var thOne = document.getElementById("thOne");
var value = thOne.getAttribute('value');
alert("value is " + value);
}
</script>
</head>
<body onload="bodyLoad()">
<table>
<tbody>
<tr id="trOne">
<th value="1" id="thOne">
</th>
<td value="" id="tdOne">
</td>
</tr>
</tbody>
</table>
</body>
</html>
The header 'Speedruns' keeps getting repeated. How can I fix this?
Also, if there is a better way to do this please let me know.
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='styles.css'>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
<script>
var app = angular.module('player2', []);
app.controller('MainController', function($scope, $http) {
$scope.data0 = null;
$scope.urls = [ // List of REST api calls with with all the streams we want.
'http://api.speedrunslive.com/test/teamK',
];
$http.get($scope.urls[0]).success(function(data) {
$scope.data0 = angular.fromJson(data);
console.log(angular.fromJson(data))
});
});
</script>
</head>
<body ng-app='player2'>
<div ng-controller="MainController">
<table class="table-size" ng-repeat="chan in data0.channels">
<tr>
<th class="text-center" colspan="2">Speedruns</th>
</tr>
<tr>
<td class="text-left">{{chan.channel.display_name}}</td>
<td class="text-left">{{chan.channel.current_viewers}}</td>
</tr>
</table>
</div>
</body>
</html>
Attached a plunker with the code in it.
Plunker
The thing you want to repeat is the tr, so put your repeat on there. At the moment you are repeating whole the table. The following should work:
<table class="table-size" >
<tr>
<th class="text-center" colspan="2">Speedruns</th>
</tr>
<tr ng-repeat="chan in data0.channels">
<td class="text-left">{{chan.channel.display_name}}</td>
<td class="text-left">{{chan.channel.current_viewers}}</td>
</tr>
</table>