I have created a JavaScript variable and when I click on the button it should increment by 1, but its not happening.
Here's manifest.json.
{
"name":"Facebook",
"version":"1.0",
"description":"My Facebook Profile",
"manifest_version":2,
"browser_action":{
"default_icon":"google-plus-red-128.png",
"default_popup":"hello.html"
}
}
Here is the code for the html page
<!DOCTYPE html>
<html>
<head>
<script>
var a=0;
function count()
{
a++;
document.getElementById("demo").innerHTML=a;
return a;
}
</script>
</head>
<body>
<p id="demo">=a</p>
<button type="button" onclick="count()">Count</button>
</body>
</html>
I want the extension to show me the value of a and increment it by one each time I click on the extension or the button
Your code is not working because it violates the default Content Security Policy. I've created a screencast of one minute to show what's wrong:
First, I've shown how to debug the problem. Right-click on your popup button, and click on "Inspect popup". After doing that, you will see the following error message:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".
This explains that your code is not working, because it violates the default CSP: Inline JavaScript will not be executed. To solve the problem, you have to remove all inline JavaScript from your HTML file, and put it in a separate JS file.
The result is shown below:
hello.html (popup page)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="demo">=a</p>
<button type="button" id="do-count">Count</button>
<script src="popup.js"></script>
</body>
</html>
popup.js
var a=0;
function count() {
a++;
document.getElementById('demo').textContent = a;
}
document.getElementById('do-count').onclick = count;
Note that I've replaced innerHTML with textContent. Learn to use textContent instead of innerHTML when you intend to change the text. In this simple example it does not matter, but in more complex applications, it might become a security issue in the form of XSS.
Change your onclick:
onclick="count"
Or change your count function to something like this:
function count()
{
var demo = document.getElementById("demo");
return function() {
demo.innerHTML = ++a;
}
}
Here is a nice demo I put together:
Code (this assumes that you add id="the_button" to your button):
window.onload = function () {
var button = document.getElementById("the_button");
button.onclick = count();
function count() {
var a = 0;
var demo = document.getElementById("demo");
return function () {
demo.innerHTML = ++a;
}
}
}
Demo: http://jsfiddle.net/maniator/ck5Yz/
Related
I have created a JavaScript variable and when I click on the button it should increment by 1, but its not happening.
Here's manifest.json.
{
"name":"Facebook",
"version":"1.0",
"description":"My Facebook Profile",
"manifest_version":2,
"browser_action":{
"default_icon":"google-plus-red-128.png",
"default_popup":"hello.html"
}
}
Here is the code for the html page
<!DOCTYPE html>
<html>
<head>
<script>
var a=0;
function count()
{
a++;
document.getElementById("demo").innerHTML=a;
return a;
}
</script>
</head>
<body>
<p id="demo">=a</p>
<button type="button" onclick="count()">Count</button>
</body>
</html>
I want the extension to show me the value of a and increment it by one each time I click on the extension or the button
Your code is not working because it violates the default Content Security Policy. I've created a screencast of one minute to show what's wrong:
First, I've shown how to debug the problem. Right-click on your popup button, and click on "Inspect popup". After doing that, you will see the following error message:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".
This explains that your code is not working, because it violates the default CSP: Inline JavaScript will not be executed. To solve the problem, you have to remove all inline JavaScript from your HTML file, and put it in a separate JS file.
The result is shown below:
hello.html (popup page)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="demo">=a</p>
<button type="button" id="do-count">Count</button>
<script src="popup.js"></script>
</body>
</html>
popup.js
var a=0;
function count() {
a++;
document.getElementById('demo').textContent = a;
}
document.getElementById('do-count').onclick = count;
Note that I've replaced innerHTML with textContent. Learn to use textContent instead of innerHTML when you intend to change the text. In this simple example it does not matter, but in more complex applications, it might become a security issue in the form of XSS.
Change your onclick:
onclick="count"
Or change your count function to something like this:
function count()
{
var demo = document.getElementById("demo");
return function() {
demo.innerHTML = ++a;
}
}
Here is a nice demo I put together:
Code (this assumes that you add id="the_button" to your button):
window.onload = function () {
var button = document.getElementById("the_button");
button.onclick = count();
function count() {
var a = 0;
var demo = document.getElementById("demo");
return function () {
demo.innerHTML = ++a;
}
}
}
Demo: http://jsfiddle.net/maniator/ck5Yz/
I have created a JavaScript variable and when I click on the button it should increment by 1, but its not happening.
Here's manifest.json.
{
"name":"Facebook",
"version":"1.0",
"description":"My Facebook Profile",
"manifest_version":2,
"browser_action":{
"default_icon":"google-plus-red-128.png",
"default_popup":"hello.html"
}
}
Here is the code for the html page
<!DOCTYPE html>
<html>
<head>
<script>
var a=0;
function count()
{
a++;
document.getElementById("demo").innerHTML=a;
return a;
}
</script>
</head>
<body>
<p id="demo">=a</p>
<button type="button" onclick="count()">Count</button>
</body>
</html>
I want the extension to show me the value of a and increment it by one each time I click on the extension or the button
Your code is not working because it violates the default Content Security Policy. I've created a screencast of one minute to show what's wrong:
First, I've shown how to debug the problem. Right-click on your popup button, and click on "Inspect popup". After doing that, you will see the following error message:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".
This explains that your code is not working, because it violates the default CSP: Inline JavaScript will not be executed. To solve the problem, you have to remove all inline JavaScript from your HTML file, and put it in a separate JS file.
The result is shown below:
hello.html (popup page)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="demo">=a</p>
<button type="button" id="do-count">Count</button>
<script src="popup.js"></script>
</body>
</html>
popup.js
var a=0;
function count() {
a++;
document.getElementById('demo').textContent = a;
}
document.getElementById('do-count').onclick = count;
Note that I've replaced innerHTML with textContent. Learn to use textContent instead of innerHTML when you intend to change the text. In this simple example it does not matter, but in more complex applications, it might become a security issue in the form of XSS.
Change your onclick:
onclick="count"
Or change your count function to something like this:
function count()
{
var demo = document.getElementById("demo");
return function() {
demo.innerHTML = ++a;
}
}
Here is a nice demo I put together:
Code (this assumes that you add id="the_button" to your button):
window.onload = function () {
var button = document.getElementById("the_button");
button.onclick = count();
function count() {
var a = 0;
var demo = document.getElementById("demo");
return function () {
demo.innerHTML = ++a;
}
}
}
Demo: http://jsfiddle.net/maniator/ck5Yz/
I have created a JavaScript variable and when I click on the button it should increment by 1, but its not happening.
Here's manifest.json.
{
"name":"Facebook",
"version":"1.0",
"description":"My Facebook Profile",
"manifest_version":2,
"browser_action":{
"default_icon":"google-plus-red-128.png",
"default_popup":"hello.html"
}
}
Here is the code for the html page
<!DOCTYPE html>
<html>
<head>
<script>
var a=0;
function count()
{
a++;
document.getElementById("demo").innerHTML=a;
return a;
}
</script>
</head>
<body>
<p id="demo">=a</p>
<button type="button" onclick="count()">Count</button>
</body>
</html>
I want the extension to show me the value of a and increment it by one each time I click on the extension or the button
Your code is not working because it violates the default Content Security Policy. I've created a screencast of one minute to show what's wrong:
First, I've shown how to debug the problem. Right-click on your popup button, and click on "Inspect popup". After doing that, you will see the following error message:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".
This explains that your code is not working, because it violates the default CSP: Inline JavaScript will not be executed. To solve the problem, you have to remove all inline JavaScript from your HTML file, and put it in a separate JS file.
The result is shown below:
hello.html (popup page)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="demo">=a</p>
<button type="button" id="do-count">Count</button>
<script src="popup.js"></script>
</body>
</html>
popup.js
var a=0;
function count() {
a++;
document.getElementById('demo').textContent = a;
}
document.getElementById('do-count').onclick = count;
Note that I've replaced innerHTML with textContent. Learn to use textContent instead of innerHTML when you intend to change the text. In this simple example it does not matter, but in more complex applications, it might become a security issue in the form of XSS.
Change your onclick:
onclick="count"
Or change your count function to something like this:
function count()
{
var demo = document.getElementById("demo");
return function() {
demo.innerHTML = ++a;
}
}
Here is a nice demo I put together:
Code (this assumes that you add id="the_button" to your button):
window.onload = function () {
var button = document.getElementById("the_button");
button.onclick = count();
function count() {
var a = 0;
var demo = document.getElementById("demo");
return function () {
demo.innerHTML = ++a;
}
}
}
Demo: http://jsfiddle.net/maniator/ck5Yz/
I have a body onload calling a function in javascript. I Have tried many things, but the console just prints to the error log: uncaught reference error: start is not defined. I think it might be a malfunction, please notify me if it works for you. My code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Monster Invasion</title>
<script type="javascript">
var hur;
var monsters = 10;
var objective = false;
var health = 100;
var damage = 30;
var sheild = false;
var ea = 1;
function start() {
setTimeout(hurt,4000)
}
function hurt() {
var newhelth = health - damage;
health = newhelth;
document.getElementById("healtw").innerHTML = health;
start();
}
function kill() {
if(monsters > 0) {
monsters--;
document.getElementById("monster1").src="dead.jpg"
setTimeout(next,2000)
}else {
objective = true;
document.location="endoflevel.html";
}
}
function next() {
document.getElementById("monster1").src="monster.jpg"
}
}
</script>
</head>
<body onload="start()">
<p id="healtw"></p>
<embed src="guide_first_level.mp3" type="audio/mp3" hidden="true" autostart="true">
<a id="st" onclick="kill()"><img id="monster1" src="monster.jpg"></a>
<p id="ada"></p>
Activate sheild
</body>
</html>
your script type is wrong.
try like this
<script type="text/javascript">
</script>
However, you don't need to mention script type. just use a plain script tag.
like this
<script>
</script>
One more thing to add that before the end of the script tag, you gave an extra }.
just remove it
function next() {
document.getElementById("monster1").src="monster.jpg"
}
} // <-- just remove this bracket
</script>
Well for some of you, who are using external js file, please just check to see whether you linked your file or not :)... because I had the same error but as I looked through my code ..I hadn't linked the file then!
just in case you came here looking for an answer too!
There are two problems with your code.
javascript is not a valid type for the script in the browser. Browsers know text/javascript, but not just javascript, that is why your code is not being executed. Change the type attribute or remove it at all (for text/javascript is the default value).
You have an extra bracket } at the end of the code. Remove it and your code will work fine.
There are 3 errors:
Correct the type of your script tag
There is an extra } at the end of your code
Instead of using onload() for body tag, you should better use window.onload as follows in order to make sure your start() function is run once document is ready:
...
<head>
<title>Monster Invasion</title>
<script type="text/javascript">
window.onload = function(){
// Put all your code here
// And at the end run start() function
start();
}
</script>
</head>
<body>
...
Javascript function writelink creates a link that fires function hiya. It works when I define and invoke writelink inside script. But, I want the body to contain another link that calls writelink to create a link. This final link fails to fire (but works if I replace hiya with alert). I am a total novice, so I hope it is something obvious. The main idea is that I have to create some links from code, and these have to fire to execute some more code. (If you want me to do this a totally different way, please try to give me a complete example.)
<HTML>
<HEAD>
<script>
function hiya (num){
alert("hiya " + num);
}
function writelink (num){
var htmlstr = "link" + num + "";
document.write(htmlstr);
}
writelink(1);
</script>
</HEAD>
<BODY>
<br>
link2;
<br>
</HTML>
document.write(htmlstr) replaces the entire DOM with the link / htmlstr you are about to insert. Use pure javascript to create the link(s) instead :
function writelink(num){
var link = document.createElement('a');
link.innerHTML='link '+num;
link.href='#';
link.onclick=hiya(num);
document.body.appendChild(link);
}
Just replace writelink() with the code above.
You would typically want to add the link to a certain element instead of just <body>, lets say a <div> with the id menu :
var cnt = document.getElementById('menu');
cnt.appendChild(link);
update
<!doctype html>
<html>
<head>
</head>
<body>
link2
<script>
function hiya(num) {
alert("hiya " + num);
}
function writelink(num){
var link = document.createElement('a');
link.innerHTML='link '+num;
link.href='#';
link.onclick=function(e) {
hiya(num);
}
document.body.appendChild(link);
}
writelink(1);
</script>
</body>
</html>