I'm trying to write a simple javascript function that will clone some html input fields when the user clicks a button, but for some reason the button's click function isn't being called when I click it. Any ideas why?
Here's the javascript:
<SCRIPT LANGUAGE="JavaScript">
$(document).ready(
function(){
$("#default-label").hide();
$("#default-element").hide();
var counter = parseInt($("#counter").val());
$("#addProduct").click(
function(){
var product = $('#fieldset-default');
var newProduct = product.clone(true);
newProduct.insertAfter(product);
document.getElementById("addProduct").innerHTML = 'Add More';
$("#counter").val(++counter);
}
);
}
);
</script>
My HTML for the button:
<button id="addProduct" type="button" name="add">Add Product</button>
i think you missed jquery plugin,included latest version of jquery library, if not there.
Related
I have an extern form from API display in a modal. I want to close the modal when it's submitted.
My modal
<div id="modal">
<div class="modalconent">
<div class="pipedriveWebForms" data-pd-webforms="https://pipedrivewebforms.com/form/f5cd01e9418f0b683195eb0e821770181945719">
</div>
<button id="button">Close</button>
</div>
</div>
My script
<script type="text/javascript">
window.onload = function () {
document.getElementById(submitButtonLoading).onclick = function () {
document.getElementById('modal').style.display = "none"
};
};
</script>
<script src="https://pipedrivewebforms.com/webforms.min.js"></script>
I can't modify the form from the API. When I inspect it in my web browser I see the submit button has the id submitButton. But, my function doesn't work with this id. I don't know how to make my modal work with the API script.
Well one thing I can see is your getElementById(submitButtonLoading) doesn't have doesn't have quotes around it.
<script type="text/javascript">
window.onload = function () {
document.getElementById('submitButtonLoading').onclick = function () {
document.getElementById('modal').style.display = "none"
};
};
</script>
Hope this helps. Cheers!
As Leo said, you are missing quotes in
document.getElementById(submitButtonLoading).
But it calls for an element with id = "submitButtonLoading" and you don't have it as I see from your code that you ided as "button"
<button id="button">Close</button>
Change it to:
<button id="submitButtonLoading">Close</button>
Please bear my ignorance.
I have a page with one button on it:
How to detect if the user clicks (on a computer) or touches (smarthone, tablet) this button?
I read the answers of this quite similar question but the solutions involves using advanced and comlicated libraries. I am just a beginner: d you know how to do this in simle JavaScrit or jQuery ?
Determine and bind click or "touch" event
Thank you all.
you could try to use a variable for this if you would like, maybe try
<script>
var buttonTouched = 0;
function anyFunc01() {
buttonTouched = 1;
}
function anyFunc02() {
if(buttonTouched == 1) {
console.log("button01 has been clicked at some point");
}
}
</script>
<button onclick="anyFunc01()">button01</button>
<button onclick="anyFunc02()">button02</button>
JAVASCRIPT
With your button use
<button onclick="myFunction()">Click me</button>
Then write your myFunction() in <script> in javascript. like this
<script>
function myFunction()
{
alert('Button clicked');
}
<script>
Read more here
http://www.w3schools.com/jsref/event_onclick.asp
JQUERY
Inlcude the jquery.js in your file then give button an ID then use a script.
Button:
<button id="submitbutton">Submit</button>
Jquery
$( "#submitbutton" ).click(function() {
alert( "Submit button clicked!." );
});
TOUCH OR CLICK JQUERY
But from what I know, the problem you can face here is the touch. Here is a code that could make for touch or click
$( document ).ready(function() {
$('#submitbutton').on('click touchstart', function() {
alert( "Submit button clicked!." );
});
});
Jsfiddle
https://jsfiddle.net/0xdLjvtu/
use jQuery!
var deviceEvent = ((document.ontouchstart!==null)?'click':'touchstart');
$("#mylink").on(deviceEvent ,function(){alert('click true!');});
This is a example code in JavaScript: The Definitive Guide,6th Edition.
<button id="my button">click me</button>
<script>
var b = document.getElementById("my button");
b.onclick = fuction(){alert("Thanks for clicking me!");}; /*work well if I delete this parse*/
b.addEventListener ("click", function(){ alert("Thanks again!");}, false);
</script>
When I click the button, nothing happen.
are you sure you write well?
1 - Remove space on id value: change id="my button" to id="mybutton".
2 - is not fuction, is function.
<button id="mybutton">click me</button>
<script>
var b = document.getElementById("mybutton");
b.onclick = function(){alert("Thanks for clicking me!");}; /*work well if I delete this parse*/
b.addEventListener ("click", function(){ alert("Thanks again!");}, false);
</script>
Your button id can't have a space between the words. Use an underscore instead like <button id="my_button">click me</button>
Also, in your function call for your onclick you spelled function wrong.
See JSFiddle for working example:
https://jsfiddle.net/us2dq8sz/
Wrong spelling in this line
b.onclick = fuction(){alert("Thanks for clicking me!");}; /*work well if I delete this parse*/
fuction instead of function
Working version : https://jsfiddle.net/x46ugomj/
Hi this is an odd question and i will try to ask it correctly. I have a function using javascript called load canvas.
function loadCanvas(canvas) {
relevant code here...
}
I also have a normal button called btn.
<button class="btn" type="button">Play!</button>
I am wondering can i disable the function until the play button is selected? The function is for a game using javascript. So on load there isnt anything there until i press play then it appears!
any ideas/help please?
$(document).ready(function(){
var loadCanvas= function (canvas) {
relevant code here...
}
$("#test").on('click',loadCanvas()); // using jquery
document.getElementById("test").addEventListener("click",loadCanvas()); // using javascript
<button class="btn" id="test" type="button">Play!</button>
})
If you are having issue because other method is triggering the function you can add a flag with a boolean and turn it on when you click..
Something like that:
The button don't change at all
<button class="btn" type="button">Play!</button>
The js code with this change:
var buttonClicked = false;
function loadCanvas(canvas) {
if(buttonClicked){
relevant code here...
}
}
And in the on click function add this before call the function:
buttonClicked = true;
At the end your js should look like this:
var buttonClicked = false;
function loadCanvas(canvas) {
if(buttonClicked){
relevant code here...
}
}
$(".btn").click(function(){
buttonClicked = true;
var canvas = ...;
loadCanvas(canvas );
});
EDIT
If you have more buttons with the class .btn you should use an id and change the selector of the .click() with the selector of the id instead of the class selector
As you mentioned in the comments <script type="text/javascript"> loadCanvas("game"); </script> You are calling the function as soon as the page loads. So you will have to change it to:
<button class="btn play-button" type="button">Play!</button>
<script type="text/javascript">
$('.play-button').click(function(e){
loadCanvas("game");}
);
</script>
If you are not using jquery you will have to handle the click event by javascript.
You got to do following:
function loadCanvas(game) {
alert('loading canvas');
}
<button class="btn" type="button" onclick="loadCanvas('game')">Play!</button>
In the HTML, I have a button defined like this:
<button type="button" onclick="toggleEdit();">Edit</button>
At the end of the page, I have this script I am working on:
<script language="JavaScript">
<!--
function toggleEdit() {
var btn = $(this);
var li = btn.parent();
var textArea = li.children('.readOnly');
...
}
//-->
</script>
I cannot reference the button I have clicked in the script. The btn variable is an object, but I don't know anything else than that.
I found many examples on the internet that are using this approach:
$(document).ready(function () {
$('#buttonID').click(function () {
...
but I cannot reference the button via ID because it is added dynamically. So, how do I reference it? Thanks.
Just to keep it your way, you have to tell the code that this will refer to the button instead of the actual function.
To do this you can just add an extra argument to the toggleEdit function.
The new HTML would look like this (no apply or call function needed):
<button type="button" onclick="toggleEdit(this);">Edit</button>
Then your new JavaScript would look like this:
<script language="JavaScript">
<!--
function toggleEdit(t) {
var btn = $(t);
var li = btn.parent();
var textArea = li.children('.readOnly');
...
}
//-->
</script>
You can pass the event into the function, and then use that.
<button type="button" onclick="toggleEdit( event );">Edit</button>
Then in your function, you can get the target of the event:
function toggleEdit( e ) {
var btn = $( e.target );
var li = btn.parent();
var textArea = li.children('.readOnly');
...
}