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.
Related
The problem is this: inside my main page (parent.html) I have an iframe (child.html) and a script block. In that script block there is a array of integers and a function that adds elements to the list. In the iframe there is a new function that adds an element to the list of the main file (parent.html).
I would like to know if it is possible for the iframe (child.html) to access this function found in parent.html. Example:
parent.html
<html>
<head>
<title>Parent</title>
<script>
var parentList = [0];
var counter = 0;
function addValue(){
counter++;
parentList.push(counter);
console.log('parent', parentList);
}
</script>
</head>
<body>
<button onclick="addValue()">Add Value (Parent)</button>
<br />
<iframe src="child.html" allowfullscreen></iframe>
</body>
</html>
child.html
<html>
<head>
<title>Child</title>
</head>
<body>
<button onclick="addValueInternal()">Add Value Child</button>
<script>
var internalCount = 0;
function addValueInternal() {
internalCount++;
parentList.push(internalCount);
console.log('child', parentList);
}
</script>
</body>
</html>
The error:
child.html:12 Uncaught ReferenceError: parentList is not defined
at addValueInternal (child.html:12)
at HTMLButtonElement.onclick (child.html:6)
Yes. it is possible. Based on an example calling a function defined in the parent from an embedded iframe.
So in your case, you would have to reference the parent when accessing your array.
function addValueInternal() {
internalCount++;
parent.parentList.push(internalCount); // here we access the reference
console.log('child', parentList);
}
Be aware that you may encounter problems concerning the cross-origin policy afterwards.
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.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>a demo page</title>
</head>
<body>
<script>
var formatNum=function(num)
{
if(!/^(\+|-)?\d+(\.\d+)?$/.test(num)){
return num;
}
var re = new RegExp().compile("(\\d)(\\d{3})(,|\\.|$)");
num += "";
while(re.test(num))
num = num.replace(re, "$1,$2$3")
return num;
}
alert(formatNum(1000000));
</script>
</body>
</html>
i use these codes to fomat number look like this 1,000,000 it works well in firefox , but not work in chrome
here is the error shows in chrome Uncaught TypeError: Cannot call method 'test' of undefined
how can i resolve this error
The RegExp().compile() method is deprecated.
Why don't you use your regex like this -:
var regexp = new RegExp("(\\d)(\\d{3})(,|\\.|$)");
It's deprecated, and not working in firefox too. Maybe your version is an old one.
Deprecated and obsolete features
Use #Raoul's suggestion.
Try with this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>a demo page</title>
</head>
<body>
<script>
var formatNum=function(num)
{
if(!/^(\+|-)?\d+(\.\d+)?$/.test(num)){
return num;
}
var re = new RegExp();
re.compile("(\\d)(\\d{3})(,|\\.|$)");
num += "";
while(re.test(num))
num = num.replace(re, "$1,$2$3")
return num;
}
alert(formatNum(1000000));
</script>
</body>
</html>
Reason is chrome doesn't return a reference to the compiled RegExp object when calling compile().
So this line var re = new RegExp().compile("(\\d)(\\d{3})(,|\\.|$)"); will not work instead a less flexible version needs to be followed.
var re = new RegExp();
re.compile("(\\d)(\\d{3})(,|\\.|$)");
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.
<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.