This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 months ago.
Learning Javascript at the moment, so please bear with me. I created a table in my connected.html and I am trying to obtain the element between the <td> tags in my event-page.js. I used document.getElementByID("tokens"), however I get null, I want to get 12. I think I have to do more with document.getElementByID("tokens") I used .innerText and .innerHTML but those didn't work. Any help would be appreciated! Sorry for such a simple problem.
*Note: The function in event-page.js is called when a button is clicked by the user.
connected.html
<html>
<head>
</head>
<body>
<table>
<tr>
<td colspan="4" class="info">Tokens</td>
</tr>
<tr>
<td id="tokens">12</td>
</tr>
</table>
</body>
</html>
event-page.js
chrome.extension.onMessage.addListener(function(request, sender, sendResponse){
if (request.action.split(':')[0] === 'got-it'){
yt_name = (request.action.split(':')[1])
console.log(yt_name)
let table = document.getElementById("tokens")
console.log(table)
}
})
This Works, that means your EventListener are called before the DOM is loaded.
let table = document.getElementById("tokens")
console.log(table)
<table>
<tr>
<td colspan="4" class="info">Tokens</td>
</tr>
<tr>
<td id="tokens">12</td>
</tr>
</table>
Related
I am trying to build small calculator using HTML/CSS and JS.
The thing is that when I am trying to select buttons of the calculator from HTML script and add EventListener to them, they are not working properly. Here is part of my HTML:
`<table class="table1">
<tr>
<td id="n-1">1</td>
<td id="n-2">2</td>
<td id="n-3">3</td>
</tr>
<tr>
<td id="n-4">4</td>
<td id="n-5">5</td>
<td id="n-6">6</td>
</tr>
<tr>
<td id="n-7">7</td>
<td id="n-8">8</td>
<td id="n-9">9</td>
</tr>
</table>`
And here is my event function:
document.querySelector(.table1 td).addEventListener('click',function(){
console.log('It works');
var z = this.value;
console.log(z);
});
The only time I am receiving the console output is when I click on first cell of table (1). I am not sure why when I click on the other cells (for example 3 or 7) this do not work.
Thanks!
querySelector() Only returns one element, in your case it returns the first td inside .table1
If you want to add the listener to all td's you must use querySelectorAll():
document.querySelectorAll('.table1 td').addEventListener('click',function(){
.... // The rest of your code
});
More info here: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
This question already has answers here:
React colspan not working
(6 answers)
Closed 5 years ago.
I'm trying to use a <table>...</table> inside React. I have this:
<table>
<tbody>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
<tr>
<td colSpan={2}> ... </td>
</tr>
</tbody>
</table>
React ignores colSpan. I've been dealing with this for a while. I found some question like this here in Stackoverflow, and the answers are to camelcase the colspan, but it doesn't work for me. It goes the same in <th colSpan={2}>...</th> What am I missing here?
It's
<td colSpan='2'>
Not
<td colSpan={2}>
In my rails each loop, I have a certain <td> that I want to add an id to, so that when I click the button a javascript method on the page that uses that id will trigger before the linked method will call. It works fine on the first go, but since each entry will have the same id at that cell, all the rest of the buttons dont work.
Instead of using an id use a class instead.
For example:
<html>
<head>
<title>example table site</title>
</head>
<body>
<table>
<tr>
<td class="example">I'm a table cell</td>
<td>I'm a table cell that doesn't have anything happen when you click</td>
</tr>
<tr>
<td class="example">Click Me</td>
<td>Another boring cell</td>
</tr>
</table>
<script>
$(".example").click(function (e) {
console.log('table cell clicked');
});
</script>
</body>
</html>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 years ago.
I don't know what I'm doing wrong. This is a 2 part question. Please see code below. First, it keeps saying that the variable capitals is null. Second, I'm unable to get innerHTML working. I'm not sure why it isn't working. I know I have document.write which I'm not suppose to use so I'm working on understanding getElementbyId.innerHTML to work.
HTML
<form name="shares">
<table>
<tr><td>Enter information here:</td></tr>
<tr>
<td>Capital to Invest</td>
<td id="capitalr"><input type="text" name="capital"> </td>
</td>
</tr>
<tr>
<td>Price per share</td>
<td><input type="text" name="price" onchang="calculate();"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Compute" onclick="calculate()"></td>
<tr><td>The quantity you can be:</td></tr>
<tr>
<td>No. of shares</td>
</tr>
<tr>
<td>Change</td>
</tr>
</table>
<p id="hello"></p>
</form>
JavaScript
var capitals = document.getElementById("capitalr");
var x = capitals.id;
var pps = document.shares.price.value;
function calculate () {
document.write("Capital = " + capitals +"<br>");
document.write("Price per share is = " + pps);
}
document.getElementById("hello").innerHTML="Hello";
1) The <tr> for your button doesn't have a </tr>.
2) There's a timing problem -- you need to put your code in a function that executes at onload time.
<body onload="fnonload();">
I suggest you use "console.log" statements as a debugging tool to see how your code is progressing. That's helped me a lot.
Hi i have a question regarding html and javascript.
Say that i click on a link on a html site say
<tr>
<td>www.hello1.com</td>
</tr>
then I also want to see if there are any other related link on that site with a narrow name, for example
<tr>
<td>www.hello2.com</td>
</tr>
So what I want to do is construct a javascript method that everytime you click on a link
you run this method and check what link that has been pressed, and then also search the entire html site for a similar link (here its very simple, the site only consist of a table containing links, so there will not be so much to search trough).
How is this done?
I only need the method, I know how to run the method everytime you press a link :)
Thanks in advance :)
Edit
With "similar" i mean something like this
'\\b'+theUrlToGoTo+'\\b'
In other words the only thing that will change is a number after the name for example
hello1 and hello2
Edit 2
Thanks to nemophrost I now know how to do the first one. I now have a second question, before Im done, thats regarding generating html code with javascript.
Now say that I have an array after I have run the everyClickFunc() func that includes
var myArray = [ 'www.hello1.com', 'www.hello2.com', 'www.hello3.com'];
I would now like to generate a simple html page like this
<html>
<head>
</head>
<body>
<table>
<tr>
<td>www.hello1.com</td>
</tr>
<tr>
<td>www.hello2.com</td>
</tr>
<tr>
<td>www.hello3.com</td>
</tr>
</table>
</html>
And this file is to be overwritten each time I click on a link. So the links will be diffrent depending on what links i click on, on the original site.
In other words I want something like this
<html>
<head>
</head>
<body>
<table>
<tr>
<td>www.testing1.com</td>
</tr>
<tr>
<td>www.hello1.com</td>
</tr>
<tr>
<td>www.testing2.com</td>
</tr>
<tr>
<td>www.hello2.com</td>
</tr>
<tr>
<td>www.hello3.com</td>
</tr>
<tr>
<td>www.diffrent1.com</td>
</tr>
<tr>
<td>www.diffrent2.com</td>
</tr>
</table>
</html>
To generate a new html site that contains the following information if you click on any of the above "hello" links
<html>
<head>
</head>
<body>
<table>
<tr>
<td>www.hello1.com</td>
</tr>
<tr>
<td>www.hello2.com</td>
</tr>
<tr>
<td>www.hello3.com</td>
</tr>
</table>
</html>
How is this easiest solved?
Again thanks you so much in advance :)
With jQuery you could do something like this:
function everyClickFunc(urlToMatch) { // pass in something like 'www.hello1.com'
var baseURLMatch = urlToMatch.match(/^www\.(.+\D)\d*\.com$/);
if (baseURLMatch && baseURLMatch.length > 1) {
var matchExp = new RegExp('^www\\.' + baseURLMatch[1] + '\\d*\\.com$');
$('a').each(function() {
if ($(this).attr('href').match(matchExp)) {
doSomethingBecauseYouGotAMatch(); // Call your successful match function
}
});
}
}