<html>
<head>
<script type="text/javascript">
var image = document.getElementById(image);
var desc = document.getElementById(desc);
var images = ["http://i.imgur.com/XAgFPiD.jpg", "http://i.imgur.com/XAgFPiD.jpg"]
var descs = ["1", "2"]
var num = 0;
var total = images.length;
function clicked(){
num = num + 1;
if (num > total){
num = 0;
}
image.src = images[num];
desc.innerHTML = images[num];
}
document.getElementById(submit).onclick(clicked());
</script>
</head>
<body>
<div><h2>Project |</h2><h2> | herbykit</h2></div>
<div>
<button id="submit">Next</button><br/>
<img id="image" src="http://i.imgur.com/XAgFPiD.jpg" height="20%" width="50%"/>
<p id="desc">first desc.</p>
</div>
</body>
</html>
The line "document.getElementById(submit).onclick(clicked());" throws an error
"ReferenceError: submit is not defined"
When I tried accessing buttons in general
[through getElementsByClassName & getElementsByTagName]
it gave an error of "ReferenceError: button is not defined"
Using strings in getElementById it throws the error "getElementById is null"
I found several questions and answers to this.
Only one of them I understood how to implement, due to the use of PHP and that being the error on most others. Other solutions I found involved errors numerically.
On this error I tried a fix of printwindow.document.getElementById(..etc
This gives me an error of "ReferenceError: printwindow is not defined"
Browsers run JavaScript as soon as possible in order to speed up rendering. So when you receive this code:
<html>
<head>
<script type="text/javascript">
var image = document.getElementById(image); // Missing quotes, typo?
... in runs intermediately. There's no <foo id="image"> on page yet, so you get null. Finally, you get the rest of the page rendered, including:
<img id="image" src="http://i.imgur.com/XAgFPiD.jpg" height="20%" width="50%"/>
It's too late for your code, which finished running long ago.
You need to bind a window.onload even handler and run your code when the DOM is ready (or move all JavaScript to page bottom, after the picture).
It should be document.getElementById('submit').onclick(clicked());
your must enclose the id you are searching for in quotes:
document.getElementById('ID_to_look_up');
You are executing javascript before your 'body' rendered. Thus document.getElementById("submit") would return null. Because there are no "submit" DOM element yet.
One solution is to move your javascripts under 'body', Or use JQuery with
$(document).ready(function() {
...
});
Your variable also has scope problem, your function cannot access variable declared outside this function with 'var' declaration. If you really need that variable, you should remove 'var' declaration.
A better way is to move all your variable inside clicked function. like following code
<html>
<head>
</head>
<body>
<div><h2>Project |</h2><h2> | herbykit</h2></div>
<div>
<button id="submit">Next</button><br/>
<img id="image" src="http://i.imgur.com/XAgFPiD.jpg" height="20%" width="50%"/>
<p id="desc">first desc.</p>
</div>
</body>
<script type="text/javascript">
function clicked(){
var image = document.getElementById("image");
var desc = document.getElementById("desc");
var images = ["http://i.imgur.com/XAgFPiD.jpg", "http://i.imgur.com/XAgFPiE.jpg"];
var descs = ["1", "2"];
var num = 0;
var total = images.length;
num = num + 1;
if (num > total){
num = 0;
}
image.src = images[num];
desc.innerHTML = images[num];
}
document.getElementById("submit").onclick = clicked;
</script>
</html>
I'm trying to setup a script that will change the background of a DIV with each page fresh.
This is my code.
Untitled Document
<script type="text/javascript">
var totalCount = 3;
function ChangeIt()
{
var num = Math.ceil( Math.random() * totalCount );
document.getElementById("content").style.backgroundImage = "url('bgimages/'"+num+"'.jpg')";}
</script>
</head>
<body>
<div id="content">
hello
</div>
<script type="text/javascript">
ChangeIt();
</script>
</body>
</html>
The problem is that it's not changing and I'm getting this error:
Error in parsing value for 'background-image'. Declaration dropped.
I'm not sure what I'm doing wrong.
Thanks in advance!
document.getElementById("content").style.backgroundImage = "url('bgimages/"+num+".jpg')";}
My add-on specifically works on a single site.
It injects a contentscript and sends a message to popup(panel in firefox terminology) to display.
Here is my contentscript:
//this code is same for firefox as well as chrome since it is that which manipulates the page in which it is injected, so I think this is indepent of browser
var table = document.getElementsByClassName("collapse")[0];
var marks = new Array();
for(var i=0;i<8;i++)
marks[i] = table.children[0].children[i+1].children[5].innerHTML;
var total=0;
for(var i=0;i<8;i++)
total += Number(marks[i]);
------------------------------------------------
//this code is different for firefox
//code to send the data to popup
var fromDOM = total;
chrome.runtime.sendMessage(fromDOM);//what is the equivalent method for sending a message to popup(panel)?
popup.html
//no change , I think would be same with firefox
<!DOCTYPE HTML>
<html>
<head>
<title>Popup page</title>
<link rel="stylesheet" type="text/css" href="popup.css">
</head>
<body>
<div id="output">
<h1><form name="F1" method="POST">
TOTAL: <p id="total"></p>
PERCENTAGE: <p id="percentage"></p>
</form></h1>
</div>
<script src="popup.js">
</script>
</body>
</html>
popup.js:
//code to load the contentscript into the page
chrome.tabs.executeScript({"file": "contentscript.js"});
//equivalent firefox code??***
-----------------------------------------------------------------
var total= 0,percentage = 0;
chrome.runtime.onMessage.addListener(function(response){
total = response;***
//Getting response sent from contentscript, how can I do the same in firefox?
percentage = total/7.25;
document.getElementById("total").innerHTML = total;
document.getElementById("percentage").innerHTML = percentage.toFixed(2)+" %";
});
What are the specific firefox methods for some chrome API's methods mentioned?
I'd be glad if any one could help me out.
Thanks
i am new to javascript. i have written a small code. but it is showing the above mentioned error in console. i don't know why. any help would be appreciated.
thanks in advance.
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p>Click the button to display the date.</p>
<p id="demo"></p>
<button type="button" onclick="testing()">Try it</button>
<script>
function testing(){
alert("testing");
var x = responseAjax;
x.resultType = "albums";
x.result = "hell owrld";
x.destId = "songsBody1";
x.sortContents();
}
function responseAjax(){
this.sortContents = function(){
alert("this issor contentes"); alert(this.resultType); alert(this.result); alert(this.destId);
}
}
</script>
</body>
</html>
Make the instance as
var x = new responseAjax();
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.