I have tried to write some code in JS but, when I hover my mouse, the error "Cannot set property 'innerHTML' of null at ahint" is seen. I have read that such an error can occur because Chrome compiles/renders the JS code before the Div is even created. Therefore, I have put it on the bottom to check it. Unfortunately, putting it on the bottom has not solved my problem. Maybe someone more experienced will understand it.
var hint = "Hello";
function ahint()
{
document.getElementById('#randomhint').innerHTML = hint;
}
<div id="randomhint" onmouseover="ahint()">!</div>
<script type="text/javascript" src="main.js"></script>
</body>
Remove the # from the identifier:
var hint = "Hello";
function ahint()
{
document.getElementById('randomhint').innerHTML = hint;
}
You have likely seen the # in code that uses jQuery or a similar library, as in $('#randomhint'). That’s how those libraries know that you mean to use an id and not, say, a tag name.
But you do not need (and cannot use) it when using getElementById (which is part of “vanilla” JavaScript). With getElementById, only the actual id value ("randomhint") belongs there.
Related
I have this snippet code at codepen and it's working perfectl, but
When trying copy it to my site it's show this error :
(index):257 Uncaught TypeError: Cannot read property 'children' of null
at (index):257
(anonymous) # (index):257
which means this line in my site :
var count = items.children.length;
I just copy compiled html, css and js same it's without any edit, May I know why this happen ?
You probably have the Javascript code in your <head></head> tag.
There the DOM is — not — ready yet.
Try copying your <script>code</script> right before the </body> tag.
When i execute a JS code in typescript, i get the following error:
ORIGINAL EXCEPTION: TypeError: Cannot read property 'setAttribute' of
null
But It works perfectly in JS without any errors.
<HTML>
<path id="border" transform="translate(125, 125)" style="stroke:white; marker-end:url(#InverseSemicircleEnd);"/>
</HTML>
TS:
document.getElementById("border").setAttribute("style",dec);
But not sure, why it results in error on TS. I also tried to change the name of the property for this ID, but no luck. Can some one help me in explaining on what i'm doing wrong here.
Thanks For your support
Regards
Suresh
Because document.getElementById could return null, you need to check if it is different from null.
const myEl = document.getElementById("border");
if (myEl !== null) {
myEl.setAttribute("style",dec);
}
OR
document.getElementById("border")?.setAttribute("style",dec);
If you are sure that the element is defined and you want to avoid the check, use the ! (Non-null assertion) operator:
document.getElementById("border")!.setAttribute("style",dec);
Make sure that the browser has loaded before querying elements because not doing so could lead to a runtime error.
I use the following way to solve :
hideDesPan(){
let pan = (<HTMLInputElement>document.getElementById('showPan'));
pan.style.display = "none";
}
After i include the bootstrap.js
<script type="text/javascript" src="/js/bootstrap/js/bootstrap.js"></script>
I get followning error in the console:
Uncaught TypeError: Cannot read property 'documentElement' of null
The boots collapse works just fine but the console get spammed this error.
I have included jquery before bootstrap.
Anyone else had this problem before?
Edit:
Tooltip.prototype.show = function () {
var e = $.Event('show.bs.' + this.type)
if (this.hasContent() && this.enabled) {
this.$element.trigger(e)
var inDom = $.contains(this.$element[0].ownerDocument.documentElement, this.$element[0])
if (e.isDefaultPrevented() || !inDom) return
var that = this
this is a snipet from the bootstrap.js script.
It seems the error comes always in the tooltip function in the var inDom line at the documentElement part
You most likely have another tooltip library still in use (like JQueryUI/Tooltip) OR you're trying to attach a tooltip directly to the document element. Please look into your code for something like:
$(document).tooltip
or something like that, and remove it in order to make things work again. Be sure to review every other .tooltip() call you might already have, since they'll most likely not work anymore: you'll need to manually port them to Bootstrap in order to make them work again.
If you want to keep both Bootstrap/Tooltip and JQueryUI/Tooltip (assuming that's your scenario), you can use $.widget.bridge to manually change the JQueryUI tooltip plugin name:
// Change JQueryUI/tooltip plugin name to 'uitooltip' to fix name collision with Bootstrap/tooltip
$.widget.bridge('uitooltip', $.ui.tooltip);
You need to to this AFTER importing the JQueryUI js file and BEFORE importing the Bootstrap js file: while you're at it I also suggest you to do the same with button/uibutton to solve the exact same problem. The result code will look like that:
<script type="text/javascript" src="path/to/jqueryui.js" />
<script type="text/javascript">
// Change JQueryUI plugin names to fix name collision with Bootstrap:
$.widget.bridge('uitooltip', $.ui.tooltip);
$.widget.bridge('uibutton', $.ui.button);
</script>
<script type="text/javascript" src="path/to/bootstrap.js" />
Then you can just re-route your $(document).tooltip call to $(document).uitooltip to make everything work.
Alternatively, if you don't find the offending js code and/or you don't want to use $.widget.brige, you can always manually patch bootstrap.js to avoid this kind of error. This can be done by replacing the following line (#1384 in bs 3.3.1):
var inDom = $.contains(this.$element[0].ownerDocument.documentElement, this.$element[0])
with this line:
var inDom = $.contains((this.$element[0].ownerDocument || this.$element[0]).documentElement, this.$element[0])
Keep in mind, tho, that you'll still have a broken .tooltip() call in your code somewhere.
See also:
http://www.ryadel.com/2015/01/03/using-jquery-ui-bootstrap-togheter-web-page/ (an article I wrote on my blog to better explain the issue)
https://github.com/twbs/bootstrap/issues/14483
http://jqueryui.com/tooltip/
Check whether the element is null before initialising it
i.e.
if($('[data-toggle="tooltip"]') != null)
{
$('[data-toggle="tooltip"]').tooltip();
}
I have been trying to figure out this particular problem in my developer tools, but I've had no luck thus far. I have an error on one of my js files that says
Uncaught TypeError: Cannot read property 'value' of null
The following error refers to the 1st variable of dt_version below. The particular thing is if I comment out the first line of code. I get the same error on the following variables of offload1 and offload2. The variable is a number that I am trying to get passed over. I run this function on my body when the page loads...onload=updatetotal();
function updatetotal() {
var dt_version = document.getElementById("dt_version").value-0;
var offload1 = document.getElementById("capacity_offload1").value-0;
var offload2 = document.getElementById("capacity_offload2").value-0;
var offload3 = document.getElementById("capacity_offload3").value-0;
}
If a run an if statement looking for document.getElementByID("dt_version");...it defaults to false..so its not being carried over though on the previous page, I can see its input fine with the value in it. What am I missing here guys?
This error means that the id dt_version does not exist. Check your html to make sure it is there:
var dt = document.getElementById("dt_version");
if (dt){
// do your stuff
}else {
console.log("dt does not exist")
}
Another cause for this error may be- as you are calling the javascript function on page load there is a possible chance that your control is not yet completely rendered to the page. A simple solution is just move that control to the beginning of the page. If it doesn't work then an reliable solution is, call the function inside jquery $(document).ready().
I'm using jQuery 1.3.2 and it's breaking under Safari 4 for mysterious reasons.
All of my javascript references are made right before the tag, yet with the following code:
var status = $('#status');
status.change( function(){ /* ... */ } );
The following error is displayed in the Web Inspector:
TypeError: Result of expression 'status.change' [undefined] is not a function.
However the error is not encountered if I eliminate the variable assignment attach the change method directly like so:
$('#status').change( function(){ /* ... */ } );
Why? I need to use variables for this and several other findById references because they're used many times in the script and crawling the DOM for each element every time is regarded as bad practice. It shouldn't be failing to find the element, as the javascript is loaded after everything except and .
Try changing the variable to something other than "status."
It's confusing your variable with window.status (the status bar text). When I typed var status = $('#status') into the debugging console, the statusbar changed to [Object object]. Must be a bug in Safari.
If you put the code inside a function, so that status becomes a function-local variable, it should work.
It's standard practice in jQuery to wrap things in a
$.onready(function() {
});
This makes sure the DOM is loaded before you try to manipulate it.