Why does this simple code not work in JSfiddle? [closed] - javascript

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I did this in JSfiddle:
http://jsfiddle.net/jocelynwang205/qSjn6/
It is supposed to turn a paragraph black, but it seems that the function cannot be called. It does not work on a real webpage either.
Later I added my JavaScript to the html in JSfiddle, like this:
<script>
function changeA(){
document.getElementById('para1').style.color ='black';
}
</script>
<p id="para1">
This is a paragraph to be changed.
</p>
Turn black.
And it worked: http://jsfiddle.net/jocelynwang205/qSjn6/1/
So I want to know why. Thanks in advance.

the original doesnt work because you have onlick instead of onclick, and do not have the code running in the head but in a onload function (settings are on the left side) causing the function to be invisible to the onclick attr
JSFiddle defaults to the javascript being run in a onLoad function so basically your code was being run like below:
<script>
window.onload = function(){
function changeA(){
document.getElementById('para1').style.color ='black';
}
};
<script>
which makes the function changeA invisible to the html onclick attribute
changing the setting to "no wrap - in head" makes it run like:
<script>
function changeA(){
document.getElementById('para1').style.color ='black';
}
<script>
which now makes it visible to the html
Below is a screenshot of where the setting is:

in the jsfiddle you specified onlick instead of onClick.
Turn black.
change it to
Turn black.
in the link, and set option No wrap in from left hand side of jsfiddle.

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#para1
{
color: red;
font-weight: bold;
}
</style>
<script type="text/javascript">
function changeA()
{
document.getElementById('para1').style.color ='black';
}
</script>
</head>
<body>
<p id="para1">This is a paragraph to be changed.</p>
Turn black.
</body>
</html>
Try this.

Related

Button on HTML calling a google script [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have an code.gs that creates a menu that opens a sidebar with html.
My html is like that:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<button onclick='ativarFeedbacks()'>Feedback</button>
<div id="aviso">aaasaaa</div>
<script>
function callback(resposta) {
document.getElementById("aviso").innerHTML=resposta;
}
function ativarFeedbacks() {
google.script.run.withSuccessHandler(callback).escrever();
}
</script>
</body>
</html>
My code.gs is like this:
function onOpen(e) {
FormApp.getUi()
.createAddonMenu()
.addItem('Configurar feedbacks', 'showSidebar')
.addToUi();
}
function showSidebar() {
var ui = HtmlService.createHtmlOutputFromFile('teste2')
.setTitle('Feedback');
FormApp.getUi().showSidebar(ui);
}
function escrever(){
return "<h1> salve salve </h1>"
}
But, when I run onOpen, I open the sidebar and press the button, nothing happens. My innerHTML on id "aviso" doesn't change like nothing was returned by escrever(). I am not understanding this behavior. What should I do?
The function escrever() doesn't exist. Use this instead:
google.script.run.withSuccessHandler(callback).escreverFeedbacks();

Simple javascript wouldnt excute | First Javascript write up | Changing Text Color [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
first time coding java script, I don't quite understand why this simple code wouldn't work with my HTML page. does this syntax looks wrong?
'changecolor' is a 'span id element' in my HTML - its working when i change it with CSS but not with the js below
var txt = document.getElementById('changecolor');
txt.style.color = "red";
I tried calling it as a function, and still nothing
var txt = document.getElementById('changecolor');
function changeColor(){
txt.style.color = "red";
}
changeColor();
I'm 6 hours in learning javascript... and im already lost
Code is correct. You can see example below.
var txt = document.getElementById('changecolor');
function changeColor(){
txt.style.color = "red";
}
changeColor();
<span id='changecolor'>TEST</span>
The problem is that you probably insert JavaScript code before your HTML tags. You should include Javascript at the end of file or wrap everything with ready function.
DomReady.ready(function() {
var txt = document.getElementById('changecolor');
txt.style.color = "red";
}
have you thought about linking your JS script to HTML, we can solve your problem with the following code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf 8">
<script type="text/javascript" src="js/script.js"></script> <!-- LINK JS -->
<title>Title</title>
</head>
<body>
<h1 class="title">Title</h1>
<p id="txt" onclick="changeColor()">Click me to change my text color.</p>
</body>
function changeColor(){
document.getElementById("txt").style.color = "blue";
}

Binding .this to an HTML element [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I've been trying to get this "this" to work, to bind it to an/any HTML element that the function is applied to. I'm trying to keep it universal to make it possible to apply the same function to multiple HTML elements.
Note:
I don't want to mess with ids nor classes and such since I want to keep the function as universal as possible.
<!doctype html>
<html>
<body>
<input type="button" value="Old" onClick="Change(this);">
<script type="text/javascript">
function Change(){
this.innerHTML = "New";
};
</script>
</body>
</html>
innerHTML won't work in this case. Being that this is an input, try using value instead.
var input = document.querySelector('input');
input.addEventListener('click', Change);
function Change(){
this.value = "New";
this.removeEventListener('click', Change);
}
<input type="button" value="Old" />
The problem is that when the page hits the input the Change function is not defined. Try the following:
<!doctype html>
<html>
<body>
<script type="text/javascript">
function Change(){
this.value = "New";
};
</script>
<input type="button" value="Old" onClick="Change.call(this);">
</body>
</html>
Note that I have changed the input's onClick to Change.call(this). And that the script is loaded before the control.
You can see a working fiddle here. Note that the JavaScript settings is configured so that the script is loaded in the head (Hit the cog in the JavaScript section).

Change a Text with Javascript [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I want chance a Text with javascript i use the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Test</title>
<script type="text/javascript">
var Neu = document.getElementById("thema")[0].value;
function Aendern () {
document.all.meinAbsatz.innerHTML = Neu;
}
</script>
</head><body>
<p id="meinAbsatz">Text</p>
<input id="thema" type="text" value="Test Theme" />
chance theme
</body>
</html>
If I click on "chance theme" the "Text" chance to "undefined"
Method getElementById() returns a single element, not a set of elements. So there is no need in applying [0] to it. Also you should put the Neu initialization inside Aendern() function:
function Aendern() {
var Neu = document.getElementById("thema").value;
document.all.meinAbsatz.innerHTML = Neu;
}
DEMO: http://jsfiddle.net/RqgMb/
http://jsfiddle.net/FJr2t/
In the link above I made your code work.
Your two major problems are:
var Neu = document.getElementById("thema")[0].value;
Firstly, getElementById('thema') returns only one item, so you should drop the [0].
Secondly javascript code in your head gets executed once, when loading. So this line once gets executed at the very beginning and reads the value the input element has then.
So you should also move it into your Aendern method.
P.S.: Putting your code in window.onload etc. is not neccessary in this case, but you should definilty look at it and do it.

Cracking effect on a page (non-flash) [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have a landing page in a website, where there is just a single image of the earth.
Now to enter the main site, I want some effect in the landing page that the earth cracks open and then the user enters the main site.
What I am currently doing: I currently divide the whole landing page image into 4 divs with a separate image in each of them (which jointly form the earth). Now when the user has to enter the site, I simple animate each of the 4 divs to each corner of the screen. But I need cracking effects & some other visually attractive effects.
Any ideas how to achieve this? Javascript (or jQuery) solution preferable.
overlay a crack image and make it slideDown() (jQuery) over the Earth img.
see http://jsfiddle.net/NKqNh/
$(function() {
$('#crack').slideDown(800);
});​
<div id="earth" class="common"> </div>
<div id="crack" class="common"> </div>​
Edit:
In your answer here is an updated js using a callback to an anonymous function for the explosion after the cracking.
http://jsfiddle.net/eC9HM/2/
$(function() {
$('#crack').slideDown(800, function() {
$('#earth, #crack').hide('explode', {pieces: 16}, 2000);
});
});
​
You can use explode effect of jQuery UI . It will break the image into many pieces(you can choose how many pieces you want) and The image will disappear
Uptdated-
Try this code-
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("img").click(function () {
$(this).hide("explode", { pieces: 24 }, 2000);
});
});
</script>
</head>
<body style="font-size:62.5%;">
<img src="http://2.bp.blogspot.com/-No5MB366RTY/T3WYGRicqUI/AAAAAAAAALQ/mDgaBLVocZE/s1600/260px-The_Earth_seen_from_Apollo_17.jpg">
</body>
</html>
Thanks for the answers, but I found my answer combining the other two answers present here.
So am just sharking the fiddle here, so that may be useful in future:
Updated fiddle:
http://jsfiddle.net/gopi1410/eC9HM/1/

Categories

Resources