insertAdjacentHTML can't read property of null - javascript

The following error keeps repeating... I just want explanation what is wrong here and some hint
error
script.js:20 Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null
at renderHTML (script.js:20)
at XMLHttpRequest.ourRequest.onload (script.js:13)
javascript
var animalContainer=_('animal-info');
function _(id){
return document.getElementById(id);
}
_('btn').addEventListener("click",function(){
var ourRequest=new XMLHttpRequest();
ourRequest.open('GET','test.json');
ourRequest.onload=function(){
var ourData=JSON.parse(ourRequest.responseText);
renderHTML(ourData);
console.log(ourData[0]);
};
ourRequest.send();
});
function renderHTML(data){
animalContainer.insertAdjacentHTML('beforeend','testing 123');
}
index.php
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<button id ="btn">Submit</button>
<script type="text/javascript" src="script.js"></script>
<div id="animal-info"></div>
</body>
</html>

You need to declare the animalContainer variable inside the renderHTML() function, or pass it as an argument.

Related

cannot change content of div - Uncaught TypeError: Cannot set property 'innerHTML' of null

I would like to change the contents of a div, using javascript and innerHTML.
I cannot get it to work. I just added the code for changing the div, before that the code was working fine. I double checked the syntax.
I'm using webshims, openlayers and jquery/javascript
In the in the console I see
Uncaught TypeError: Cannot set property 'innerHTML' of null
imagegaledit - myFile.php :768
so.onmessage - myFile.php :324
768 is that line
document.getElementById("imgedtitle").innerHTML=mnmi[0];
and 324 is this
imagegaledit(0);
Little help?
Thanks
edit
websockets work and responce fine
Here is the code (concise and simplified)
<!doctype html>
<header>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html">
<script src="jquery-1.8.2.min.js"></script>
<script src="js-webshim/minified/extras/modernizr-custom.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>
<script>
$.webshims.polyfill();
</script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!--open layers api library-->
<script type='text/javascript' src='OpenLayers.js'></script>
<script type='text/javascript'>
//openlayers vars and stuff here...
function init(){
//when a point on map clicked...
function selected_feature(event){
//some openlayers magic...
var so = new WebSocket("ws://localhost:8000");
so.onerror=function (evt)
{response.textContent = evt;}
so.onopen = function(){
response.textContent = "opened";
so.send(JSON.stringify({command:'map',fmid:jas}));
}
so.onmessage = function (evt) {
var received_msg = evt.data;
var packet = JSON.parse(received_msg);
//pass data to var and arrays...
imagegaledit(0);
}
}//closes function selected_feature
}//closes init
function imagegaledit (w){
if (w==0){
document.getElementById("imgedtitle").innerHTML=mnmi[0];
}
}//closes imagegaledit
</script>
<body onload='init();'>
Title</br><div id="imgedtitle"> </div> </br>
</body>
You need a closing script tag:
</script>
<body>

Object #<HTMLDocument> has no method 'getElementByName'

I copy some javascript example form jsfiddle and run them on local server but it shows the error on google chrome at inspect_element/console. Any suggestions for fixing this? Thanks.
error:
Uncaught TypeError: Object #<HTMLDocument> has no method 'getElementByName'
compute onclick
my code:
<!DOCTYPE html>
<html>
<head>
<title>My fruit</title>
<script type="text/javascript">
function checkFruit(){
var fruit_radio_pointers = document.getElementsByName("fruit");
var which_fruit = null;
for(var i=0; i<fruit_radio_pointers.length; i++){
if(fruit_radio_pointers[i].checked){
which_fruit = fruit_radio_pointers[i].value;
break;
}
}
alert(which_fruit);
}
document.getElementById("my_btn").addEventListener("click", checkFruit, false);
</script>
</head>
<body>
<p>
<button id="my_btn">Which Fruit?</button>
</p>
</body>
</html>
Names do not enforce uniqueness in html, so the function is getElementsByName (note the s after Element). When you change this, remember it will return an array, not one element.

Why am I getting a "Cannot read property 'nodeType' of null" error with Knockout JS?

Today is the first day for me in Knockout . Got struck with it . Below is my first sample code using knockout.js and it shows an error .
Cannot read property 'nodeType' of null
Here is my script:`
function ViewModel()
{
var self = this;
self.n1 = ko.observable(10);
self.n2 = ko.observable(10);
self.n3 = ko.observable(10);
}
ko.applyBindings(new ViewModel()); `
Here is my html:
<body>
<p>Number1:<input data-bind="value:n1"></input></p>
<p>Number2:<input data-bind="value:n2"></input></p>
<p>Number3:<input data-bind="value:n3"></input></p>
</body>
I want to know the reason for the above error and how to overcome it...
If you set up your code like this, it'll work.
<body>
<p>Number1:<input data-bind="value:n1"></p>
<p>Number2:<input data-bind="value:n2"></p>
<p>Number3:<input data-bind="value:n3"></p>
<script src="knockout.js"></script>
<script>
function ViewModel() {
var self = this;
self.n1 = ko.observable(10);
self.n2 = ko.observable(10);
self.n3 = ko.observable(10);
}
ko.applyBindings(new ViewModel()); `
</script>
</body>
If you want to keep your <script> at the top of the page, you can use jQuery's ready() function to delay the initialization until the page has loaded.
$(document).ready(function() {
ko.applyBindings(new ViewModel());
});
I think ko.applyBindings(obj); should be write under view model.
<!DOCTYPE html>
<html>
<head>
<title>KO Examples</title>
<script type='text/javascript' src='knockout-3.1.0.js'></script>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
var obj = {
first_name : 'Gazal Irish'
};
</script>
</head>
<body>
<div>
<p>My name : <span data-bind="text: first_name"></span>
<p>
</div>
<script type="text/javascript">
ko.applyBindings(obj);
</script>
</body>
</html>

Undefined error in JavaScript

I'm getting data from XML. I can successfully pick up a price from the XML but there is a unexpected error called undefined that shows up when I use the function given below;
<html>
<head>
<script type="text/javascript">
function myXml(origin, destination) {
var x=xmlDoc.getElementsByTagName("flights");
for(i=0;i<x.length;i++) {
if(x[i].getAttribute('FrTLAs')==origin && x[i].getAttribute('destination')==destination) {
document.write(x[i].getAttribute('price'))
}
}
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(myXml('SYD','Bali'));
</script>
</body>
</html>
myXml('SYD','Bali') call returns undefined, as you do not return anything in function body. So
document.write(myXml('SYD','Bali'));
will print "undefined" . Just replace above code with this:
myXml('SYD','Bali');
Engineer is correct, or better return the value from your myXml function.
so, document.write(undefined) wont occur and you may not get the above error.

why change DOM property in anonymous function not working?

<html>
<head>
<title>test</title>
<script type="text/javascript">
function start(){
document.getElementById("first_div").onclick = function(){
document.getElementById("another_div").style.color = "red";
};
}
</script>
</head>
<body onload="start()">
<div id="first_div">first</div>
<div id="anoter_div">second</div>
</body>
</html>
when I click on the first_div, an error occurred:
TypeError: Result of expression 'document.getElementById("another_div")' [null] is not an object.
Any idea why this is not working?
thank you.
You've made a typo. Change:
document.getElementById("another_div")
^
To:
document.getElementById("anoter_div")
Or you could change the name of your div, which is probably better:
<div id="anoter_div">second</div>
<div id="another_div">second</div>
^
The method document.getElementById(..) isn't able to find the element and returns null, which explains the error you're getting.

Categories

Resources