This question already has answers here:
Onclick event getting called automatically
(3 answers)
Closed 7 years ago.
I have a script that makes that makes a tile for every item in an XML-file. The tile is a div inside an "a" tag created by javascript.
document.getElementById('Body').appendChild(tileLink);
tileLink.appendChild(tile);
tile.appendChild(tileTitle);
tile.appendChild(tileImg);
document.write(" ");
So when tileLink is clicked a javascript function "showDiv(divId)" has to be loaded. divId is a variable in the script needed to load the function.
I've tried these 2 lines but with both the script doesn't work and no objects are loaded.
tileLink.onclick = showDiv(divId);
textLink.addEventListener("click", showDiv(divId));
Where am I wrong?
Event handlers require function references. By invoking the function, you are immediately executing it.
textLink.addEventListener("click", function() {
showDiv(divId);
});
Related
This question already has answers here:
JavaScript button onclick not working
(13 answers)
javascript function name cannot set as click?
(6 answers)
Closed 1 year ago.
I want to change the color of the text using the javascript function but nothing happens when I click on the button. The files are in the same folder.
function click() {
document.getElementById('test').style.color = "red";
alert("hello");
}
<p id="test">Hello world</p>
<button type="button" onclick="click()">hello</button>
You had the logic right, but the naming of the javascript function is the problem.
I'm not sure why, but the click() function is reserved for something else and won't actually call your defined function. If you simply rename your function to something like press() it should actually call your function and change the color of your text
This question already has answers here:
Why isn't my JavaScript working in JSFiddle?
(7 answers)
Closed 5 years ago.
I am new to javaScript, that's why I am unable to find the real root cause for it.
This simple code is to append the value of a button into a paragraph every time i press it; however if the paragraph contains only a zero then it should replace the value, not append.
This is working fine on all of my browsers and also when running the snippet on stackoverflow .
Not working at all on https://jsfiddle.net/
Can you please tell me why I am facing this problem and what changes should I make to make it work on every platform?
function append(a){
if (document.getElementById('text1').innerHTML == '0')
document.getElementById('text1').innerHTML = document.getElementById(a).value;
else
document.getElementById('text1').innerHTML += document.getElementById(a).value;
};
<div>
<p id='text1' style="border-style: inset;
width:200px;
display:inline-block;">0</p><br>
<button value="1" id='a1' onclick="append(this.id)">1</button></div>
By default JSFiddle wraps your JavaScript in an onload function. This means that function append is only defined in that scope, and is not made global.
Global variables (and functions) are generally considered bad practice, as are inline event handlers.
Try:
document.getElementById('a1').onclick = append;
Then, inside function append, simply refer to this.value.
This question already has answers here:
How to get an HTML element's style values in JavaScript?
(5 answers)
Closed 6 years ago.
I have a problem with the following JS function:
function toggleSortierung() {
var form =document.getElementById("sortieren_form");
if(form.style.display=="none") {
document.getElementById("sortieren_form").style.display="block";
}
else {
document.getElementById("sortieren_form").style.display="none";
}
}
This is toggling the visibility of a form on and off. The form is not visible on default. The function is integrated into a link:
Sortierung:
The function actually works, but the very first click on the link is doing nothing, although it should make the form visible. After the first click the function works like expected, so it only hinders smooth usability.
put an inline style display:none in your form element.. so that it will return form.style.display as none on first click
This question already has answers here:
How to call multiple JavaScript functions in onclick event?
(14 answers)
Closed 7 years ago.
I was trying to run two JS functions in one click using this. Can anybody show me how to do it correctly?
<button onclick="getlocation" onclick="showDiv()">Try It</button>
I tried adding a ; between the two functions but it didnt work too.
"Adding ";" semicolon didn't work, if you could help.."
It works for sure, you have to do it like that: onclick="getLocation();showDiv()"
Was not relevant in this case:
The problem could be, that both functions are setting the content of your div, so the second function will overwrite the content!
Use .innerHTML += "..."; on you second function, this will append the content to the exisitng content.
This question already has answers here:
Find currently visible div in jquery
(5 answers)
Closed 3 years ago.
Only one jQuery event runs per refresh of the page. What am I doing that's so wrong?
$("#contact_link_email").on("click",function(){
$("#contact-form").replaceWith('<h2>Email heading</h2>');
});
$("#contact_link_facebook").on("click",function(){
$("#contact-form").replaceWith('<h2>Facebook heading</h2>');
});
$("#contact_link_twitter").click(function(){
$("#contact-form").replaceWith('<h2>Twitter heading</h2>');
});
$("#contact_link_gplus").click(function(){
$("#contact-form").replaceWith('<h2>GPlus heading</h2>');
});
Once one of those events runs, $("#contact-form") doesn't reference anything. If you want to replace it with something, try making that something have the same id.