Undefined error in JavaScript - 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.

Related

insertAdjacentHTML can't read property of null

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.

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.

What's wrong with this short Javascript code?

I'm trying to make the short Javascript code throw an alert and show 93 instead of 0-93 but it's not working ?
<html>
<head>
<script type="text/javascript">
function numberFromInput(value) {
return alert(Number(value.match(/[-]?(\d*)$/).pop()));
}
</script>
</head>
<body>
numberFromInput(0-93);
</body>
</html>
You have to call the function (you're just displaying its call code as content). And you have to pass the value as a string (you need quotes around 0-93):
<script type="text/javascript">
function numberFromInput(value) {
return alert(Number(value.match(/[-]?(\d*)$/).pop()));
}
numberFromInput("0-93");
</script>

what if jquery.js is include into the page twice?

If I introduce the jquery.js into the page twice(unintentional OR intentional), what will happen?
Is there any mechanism in jquery that can handle this situation?
AFAIK, the later one jquery will overwrite the previous one, and if there is some action binding with the previous one, it will be cleared.
What can I do to avoid the later one overwrite the previous one?
===edited===
I couldn't understand WHY this question got a down vote. Could the people who give the down vote give out the answer?
==edited again==
#user568458
u r right, now it's the test code:
<html>
<head>
</head>
<body>
fast<em id="fast"></em><br>
slow<em id="slow"></em><br>
<em id="locker"></em>
</body>
<script type="text/javascript">
function callback(type){
document.getElementById(type).innerHTML=" loaded!";
console.log($.foo);
console.log($);
console.log($.foo);
$("#locker").html(type);
console.log($("#locker").click);
$("#locker").click(function(){console.log(type);});
$.foo = "fast";
console.log($.foo);
}
function ajax(url, type){
var JSONP = document.createElement('script');
JSONP.type = "text/javascript";
JSONP.src = url+"?callback=callback"+type;
JSONP.async = JSONP.async;
JSONP.onload=function(){
callback(type);
}
document.getElementsByTagName('head')[0].appendChild(JSONP);
}
</script>
<script>
ajax("http://foo.com/jquery.fast.js", "fast");
ajax("http://foo.com/jquery.slow.js", "slow");
</script>
</html>
it produced the result:
undefined test:12
function (a,b){return new e.fn.init(a,b,h)} test:13
undefined test:14
function (a,c){c==null&&(c=a,a=null);return arguments.length>0?this.bind(b,a,c):this.trigger(b)} test:16
fast test:19
undefined test:12
function (a,b){return new e.fn.init(a,b,h)} test:13
undefined test:14
function (a,c){c==null&&(c=a,a=null);return arguments.length>0?this.bind(b,a,c):this.trigger(b)} test:16
fast
the token "$" of the previous one(jquery.fast.js) is overwrite by the later(jquery.slow.js) one.
Is there any method to avoid the overwriting?
I did try this code:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$('#try').click(function() {
alert('ok');
});
});
</script>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<button id="try">Try me</button>
</body>
</html>
Nothing happend. On click I've got an alert. Same result if the second jquery.js loaded in body tag before or after the button.

Solution to jQuery.get() returning null on Localhost?

I'm having issues getting jQuery to work correctly while testing on Localhost.
The function that's giving me trouble:
function poll() {
$.get(location.href, function(data) {
var x = $('#datadump', data);
alert(x.html());
});
}
Where location.href = http://localhost/polltest.php
The alert merely returns null instead of a random number produced by PHP's rand function. The source of localhost/polltest.php is:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function poll() {
$.get(location.href, function(data) {
var x = $('#datadump', data);
alert(x.html());
});
}
</script>
</head>
<body onload="poll();">
<div id="datadump">
<?php
$val = rand(0, 100);
echo $val;
?>
</div>
</body>
</html>
Any help regarding a way for this to work would be wonderful and appreciated.
There could be multiple ways to achieve the value of the div with id datadump.
One of the ways being
function poll() {
$.get(location.href, function(data) {
x = $(data).filter('#datadump');
console.log(x);
});
}
The reason it is failing for you:
When you have an HTML string which contains <html>, <head>, <body> tags, and you try to do
$(string)
those elements will be ignored. Only those elements which can be put inside a div are valid. Read it in the jQuery documentation.
When passing in complex HTML, some browsers may not generate a DOM
that exactly replicates the HTML source provided. As mentioned, we use
the browser's .innerHTML property to parse the passed HTML and insert
it into the current document. During this process, some browsers
filter out certain elements such as <html>, <title>, or <head>
elements. As a result, the elements inserted may not be representative
of the original string passed.
This issue has been discussed in detail on this link: https://stackoverflow.com/a/5642602/410367
Can you try this way,
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var x = $('#ads');
alert(x.html());
$.get(location.href, function (data) {
var x = $('#ads', data);
alert(data);
alert(x.html());
});
});
</script>
</head>
<body>
<div id="datadump">
<?php
$val = rand(0, 100);
echo $val;
?>
</div>
</body>
Update: I have changed the script little bit similar to your original post. It works fine for me.

Categories

Resources