I am trying to write a javascript function that would call on button click but through a div class id. How to write that?
<body>
<div class="content">
<button>Click me</button>
</div>
</body>
after click it should write message I am here.
This is really simple. just you will have to call click function with div class.
like this
$('.content').click(function(){
alert("You have done");
})
Here is DEMO
Javascript solution for the html provided:
document.getElementsByClassName('content')[0].onclick = function () {alert("I am here");};
Javascript for any button in the div:
message = function () {
alert("I am here");
};
var items = document.getElementsByClassName('content')[0].children;
for (var i in items) {
if (items[i].tagName == "BUTTON") {
items[i].onclick = message;
}
}
$(function(){
$(".content").find("button").on("click",function(){
alert("I am here");
});
});
Related
helo here is a code:
<a id="sdffg" href="/allgemeinen/me-libe-love-y/"><p class="erfg" class="quotes">
bla bla bla
</p></a>
i want to delete a element
js code for it:
<script>
window.onload=function(){
var btn = document.getElementById('sdffg');
btn.onclick = function () {
document.getElementById('txt').remove();
this.remove();
};
}
</script>
but it is not working, page:
https://geburtstagsplanet.com/allgemeinen/me-libe-love-y/
my js code is really in source code but it is not working:
view-source:https://geburtstagsplanet.com/allgemeinen/me-libe-love-y/
You can already put onclick directly on your a tag like this:
<a id="sdffg" href="/allgemeinen/me-libe-love-y/" onclick="this.remove()">
Also based on your question you wanted to delete the element on onload then it must be:
Javascript:
window.onload=function(){
var elem = document.getElementById("sdffg");
elem.parentNode.removeChild(elem);
}
you can also use jQuery:
$(document).ready(function(){
$("#sdffg").remove();
});
Problem: #txt doesn't exits in the DOM,
Best guess is you want to delete #sdffg from the dom
window.onload=function(){
var btn = document.getElementById('sdffg');
btn.onclick = function (e) {
e.preventDefault();
document.body.removeChild(this);
};
This should help.
<script>
window.onload=function(){
const element = document.getElementById("elementor-icons-fa-solid-css");
element.remove();
}
</script>
I am quite new to programming, and have met a problem.
I really want to run this function, when I press a button. Here is the function that I want to run:
function generateTip() {
var tip = tipsList[generateNumber()];
var tipElement = document.querySelector('.js-tip');
tipElement.innerHTML = tip;
}
Alright, I want to run this function, when pressing a button, and here is the code for my jQuery button:
$(document).ready(function(){
$('button').click(function() {
//run function here
});
});
It doesn't have to be jQuery, I just thought that would be easier. I would be very grateful if somebody would help and explain.
Thanks in advance.
Inside your HTML, you can use the onclick event handler to call a function when the button is clicked, using vanilla javascript. Like so:
<button onclick="generateTip()">button text</button>
If you want a solution using jQuery and your current code, all you have to do is call the generateTip() function inside the $('button').click wrapper:
$(document).ready(function(){
$('button').click(function() {
generateTip();
});
});
So if you have a .js file with this code:
function generateTip() {
var tip = tipsList[generateNumber()];
var tipElement = document.querySelector('.js-tip');
tipElement.innerHTML = tip;
}
You can then attach it to an HTML element like so:
<button onclick="generateTip()"> Button </button>
Hope that helps
You're already there?
JQUERY Script:
<script>
$(document).ready(function(){
$('button').click(function() {
generateTip();
});
});
function generateTip() {
var tip = tipsList[generateNumber()];
var tipElement = document.querySelector('.js-tip');
tipElement.innerHTML = tip;
}
</script>
or by onclick only in the actual HTML and a script above:
<script>
function generateTip() {
var tip = tipsList[generateNumber()];
var tipElement = document.querySelector('.js-tip');
tipElement.innerHTML = tip;
</script>
Then in your HTML something like this
<input type="button" name"button" onclick="generateTip()";
To execute the function generateTip() on click, put this in your button code:
<input type="button" name="any" onclick="generateTip()"/>
I am learning javascipt and now i have a piece of code but i am unable to get this to work, javascript isn't executed. I have already searched the web but i can't find an answer. Maybe you guys can help me with this.
HTML
<html>
<head>
<title>Text Game</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<button><span id="click">0</span></button>
</body>
</html>
Javascript
// Variables
var waarde = {
amount:2
};
$(document).ready(function() {
updateValues();
});
function updateValues() {
document.getElementById("click").innerHTML = waarde.amount;
}
$('#click').click(function() {
waarde.amount = waarde.amount + 1;
updateValues();
});
You have a couple of issues here:
Issue #1:
The element does not exist in the DOM to bind to yet, so do any or all of the following:
Move your script tag to the footer, right before the closing </body> tag (generally best practice anyway).
Use event delegation to bind to events on future elements.
Put all the JavaScript in the ready handler.
Issue #2:
You should not bind a click event handler on an element inside a button, it will not work in specification compliant browsers as the button consumes the event, and it not propagated to children.
See the HTML5 spec for button for reference:
Content model:
Phrasing content, but there must be no interactive content descendant.
Instead, bind the click event handler to the button itself.
// Variables
var waarde = {
amount: 2
};
$(document).ready(function(){
updateValues();
});
function updateValues(){
document.getElementById("click").innerHTML = waarde.amount;
}
// Binding to the button element using event delegation.
$(document).on('#button').click(function(){
waarde.amount = waarde.amount + 1;
updateValues();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button"><span id="click">0</span></button>
Also, unless you need the span element for something else, you could get rid of it and just use:
document.getElementById("button").innerHTML = waarde.amount;
You should put this code:
$('#click').click(function(){
waarde.amount = waarde.amount + 1;
updateValues();
});
Inside of $(document).ready(function(){}) function. $('#click') isn't in the DOM yet..
You have to write "Click" event in document.ready
var waarde = {
amount: 2
};
$(document).ready(function () {
$('#click').click(function () {
waarde.amount = waarde.amount + 1;
updateValues();
});
updateValues();
});
function updateValues() {
document.getElementById("click").innerHTML = waarde.amount;
}
The problem with your code is you are not assigning an event handler when javascript loads the js file. It should be called in the ready function.
var waarde = {
amount:2
};
$(document).ready(function(){
$('#click').click(function(){
waarde.amount = waarde.amount + 1;
updateValues();
});
});
function updateValues(){
document.getElementById("click").innerHTML = waarde.amount;
}
You should wrap it inside the ready method!
// Variables
var waarde = {
amount:2
};
$(document).ready(function() {
$('#click').click(function() {
waarde.amount = waarde.amount + 1;
updateValues();
});
});
function updateValues() {
document.getElementById("click").innerHTML = waarde.amount;
}
Here's a codepen link http://codepen.io/anon/pen/vKXQza
Two points:
You should put your jQuery event listener inside the document.ready.
There is no guarantee to work click event on span.
// Variables
var waarde = {
amount:2
};
$(document).ready(function(){
updateValues();
$('#click2').click(function(){
waarde.amount++;
updateValues();
});
});
function updateValues(){
document.getElementById("click2").innerHTML = waarde.amount;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<button id="click2">0</button>
You can see your problem solution is here
You are missing button click event in $(document).ready(function(){}(;
i have a button , in its click i will call a function which will open a popup with OK and CANCEL button. And click of these button the first function which i called to open the div should return true or false respectively. below is what i want.
<a id="button"> click me </a>
$("#button").click(function(e){
if(openPopUp()){
}
});
function openPopUp()
{
// this will opean a popUpwith OK n Cancel and onclick of Ok this function should return true and false if its Cancel
}
You can use javascript confirm dialog, like following confirm("Popup example") when user click on OK it will return true else on clicking Cancel button it will return false.
Hope this helps.
$("#button").click(function(e)
{
if(openPopUp())
{
alert('OK clicked');
}
});
function openPopUp()
{
return confirm("Please enter your name");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="button"> click me </a>
<script type="text/javascript">
function AlertIt() {
var answer = confirm ("Please click on OK to continue.")
if (answer)
window.location="http://www.continue.com";
}
</script>
<a href="javascript:AlertIt();">click me</a
you can try this one:
function demo(e, el){
alert(this);
alert(e);
alert(el);
}
/* this = "hey"
* e = "there"
* el = "!"
*/
demo.call("Hey", "there", "!");
Or
<script type="text/javascript">
function AlertIt() {
var answer = confirm ("Please click on OK to continue.")
if (answer)
window.location="http://www.continue.com";
}
</script>
click me
DEMO
This can be achieved easily using confirm
The snippet shows how to do this with the confirm code. You then just put your true code inside the if statement.
This put all script into ONE easy to manage function
$("#button").click(function(){
if (confirm("Are you sure?")) {
//put code for true here
$(".test").css("background-color", "red");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Hello World</div>
<button id="button">Button</button>
How can I write this code in a loop?
Actually I am using some different links to show and hide box for each related link. I want to show/hide box for each link showing information related to that link.
function hidedetailbox1()
{document.getElementById("plc1").style.display="none";}
function showdetailbox1()
{document.getElementById("plc1").style.display="block";}
function hidedetailbox2()
{ document.getElementById("plc2").style.display="none";}
function showdetailbox2()
{document.getElementById("plc2").style.display="block"; }
function hidedetailbox3()
{document.getElementById("plc3").style.display="none";}
function showdetailbox3()
{document.getElementById("plc3").style.display="block"; }
function hidedetailbox4()
{document.getElementById("plc4").style.display="none";}
function showdetailbox4()
{document.getElementById("plc4").style.display="block";}
function hidedetailbox5()
{document.getElementById("plc5").style.display="none";}
function showdetailbox5()
{document.getElementById("plc5").style.display="block";}
function hidedetailbox6()
{document.getElementById("plc6").style.display="none";}
function showdetailbox6()
{document.getElementById("plc6").style.display="block";}
function hidedetailbox7()
{document.getElementById("plc7").style.display="none";}
function showdetailbox7()
{document.getElementById("plc7").style.display="block";}
function hidedetailbox8()
{document.getElementById("plc8").style.display="none";}
function showdetailbox8()
{document.getElementById("plc8").style.display="block";}
function hidedetailbox9()
{document.getElementById("plc9").style.display="none";}
function showdetailbox9()
{document.getElementById("plc9").style.display="block";}
function hidedetailbox10()
{document.getElementById("plc10").style.display="none";}
function showdetailbox10()
{document.getElementById("plc10").style.display="block";}
function hidedetailbox11()
{document.getElementById("plc11").style.display="none";}
function showdetailbox11()
{document.getElementById("plc11").style.display="block";}
function hidedetailbox12()
{document.getElementById("plc12").style.display="none";}
function showdetailbox12()
{document.getElementById("plc12").style.display="block";}
function hidedetailbox13()
{document.getElementById("plc13").style.display="none";}
function showdetailbox13()
{document.getElementById("plc13").style.display="block";}
You could use a function like this...
var toggleDisplay = function(i, hide) {
document.getElementById('plc' + i).style.display = hide ? 'none' : '';
}
You pass it the number (as i) and whether it should hide or reset (as hide) the display property.
function hidedetailbox(id){
....
Suppose you have 10 comments listed in the page,
when you display it from the server, in your server script keep a count like
<div id="1">comment1</div>
<div id="2">comment2</div>
<div id="3">comment3</div>
etc...
if it's any other content like a image, you can use
<...name="1"....>
now you can handle them in a loop like this,
for(i++){
getElementById(i); //handle it the way you want here.
}
further if you have a specific name for the element, you can concat with the "i"
like
getElementById("comment"+i);
Suggestion: you can use jquery to do this for you
.toggle() .show() .hide() can be a good thing to look at..
Good luck :)
Since you mentioned jquery. You can use toggle
$('.boxlink').click(function(e) {
$($(e.target).attr('href')).toggle();
return false;
});
Your links in HTML will look something like this:
Toggle PLC 1
Toggle PLC 2
toggle example:
<html>
<head>
<script type="text/javascript">
var toggleDisplay = function(id) {
if (document.getElementById(id).style.display == 'none'){
document.getElementById(id).style.display = '';
}
else {
document.getElementById(id).style.display = 'none';
}
}
</script>
</head>
<body>
<table>
<tr><td onmouseover="toggleDisplay(1);">Test toggle</td><td id=1 name=1 >Toggle me!</td></tr>
</table>
</body>
</html>