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>
Related
So I keep getting this error nothingButton is not defined. But I defined it. Does anybody know what is happening?
JavaScript:
function nothingButton() {
$("#button-nothing").on('click', function() {
$(this).prop('disabled', true);
const p = document.createElement('p');
p.innerText = "Well, except for this";
document.querySelector('#button').appendChild(p);
})
}
HTML:
<div id="button">
<button id="button-nothing" onclick='nothingButton()'>This button does nothing</button>
</div>
I also have the javascript file source in my html file.
Well, the code above is actually fine.
It might be something else at your code or just some typography errors.
Except the fact that you might get 2 of "Well, except for this" message since every time you click the button, it attach another onclick listener.
Here is what I re-create for you :
<html>
<head>
<!-- Use jquery from cdnjs here -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="button">
<button id="button-nothing">This button does nothing</button>
</div>
<script>
function nothingButton() {
$("#button-nothing").on('click', function () {
$(this).prop('disabled', true);
const p = document.createElement('p');
p.innerText = "Well, except for this";
document.querySelector('#button').appendChild(p);
});
}
// Attach the event listener once.
nothingButton();
</script>
</body>
</html>
Initial state :
Button clicked state :
Here is the thing. I'm working on elementor EA lightbox. So when I click on an image a lightbox with video pops up. So I want it to redirect when the person clicks on the "X" button. We can achieve it with a script by adding an ID to the button and on click redirect to a link, I know. But the problem is with elementor, we can't actually add ID or Class to the close button.
This is how the close button looks like.
<button title="Close" type="button" class="mfp-close">×</button>
This is the code I tried. But it is not working with "getElementsByClassName" for some reason. And as I said I even can't add an ID to the button.
<script type="text/javascript">
document.getElementsByClassName("mfp-close").onclick = function () {
location.href = "www.google.com";
};
</script>
Can anyone see how this could work? Any help please?
document.getElementsByClassName("mfp-close") return an array
you can try
document.getElementsByClassName("mfp-close")[0]
<script type="text/javascript">
document.getElementsByClassName("mfp-close")[0].onclick = function () {
location.href = "www.google.com";
};
</script>
Change class to ID and then:
<script type="text/javascript">
$("#mfp-close).click(function () {
window.location.href = "www.google.com";
});
</script>
TRY using querySelector instead of getElementByClassName
document.querySelector(".mfp-close").onclick = function () {
location.href = "www.google.com";
};
Can someone please help me make a button which prints thank you when clicked? I know there are lots of ways to do this but in my circumstance, I need to use an if statement and this has me totally stumped. I have not done much because I am totally unsure of what syntax to use. I have made a website for a school project and it has a form on one of the pages. It is a requirement to use javascript to do something with an if statement. I would like to have a button at the bottom of the form which does something to the page when clicked. I don't really mind what happens but I thought a thank you message would be nice.
Cheers :)
<!DOCTYPE html>
<html>
<body>
<button id="sub">Subscribe</button>
</body>
<script>
function button () {
var message = document.getElementById("message");
if (sub.onclicked == true) {
/*Pop up with thank you*/
};
};
button ();
</script>
</html>
If you need if then you can test if button was clicked only once. But first thing is that you need an event that will fire when button is clicked, and document.getElementById value need to match you html id attribute.
function button () {
var message = document.getElementById("sub");
var cliked = false
message.onclick = function() {
if (!cliked) {
cliked = true;
alert('Thank you');
}
};
}
button();
<button id="sub">Subscribe</button>
The key issue here is you're trying to introduce code that has no use. For example here's how you add a message to the page when you click a button:
const button = document.querySelector('#sub');
const message = document.querySelector("#message");
button.addEventListener('click', handleClick, false);
function handleClick(event) {
message.textContent = 'Hallo';
};
<button id="sub">Subscribe</button>
<div id="message" />
There's no room for an if statement here given the basic code example you have in your question. Your assignment may even be marked down if you start adding unnecessary code. That's why I suggested having a look at your requirements and changing them.
For example you might decide you want two buttons that give different messages when you click on them, using an if statement to differentiate between them:
// Because we have two buttons we use a class instead of an id
// and we can pick them up with `querySelectorAll`
const buttons = document.querySelectorAll('.sub');
const message = document.querySelector("#message");
// Instead of attaching one event listener to one element we
// loop over our buttons and attach an event listener to each one
buttons.forEach(button => button.addEventListener('click', handleClick, false));
function handleClick(event) {
// We destructure the dataset id from the button that was clicked
const { target: { dataset: { id } } } = event;
// And we use an if statement to choose between two different messages
if (id === 'msg1') message.textContent = 'Hallo';
if (id === 'msg2') message.textContent = 'Secret message!';
};
<!-- Each button has its own data attribute -->
<button data-id="msg1" class="sub">Button 1</button>
<button data-id="msg2" class="sub">Button 2</button>
<div id="message" />
Further reading:
querySelector and querySelectorAll
Destructuring assignment
Data attributes
addEventListener
<button id="sub">Subscribe</button>
<script>
document.getElementById("sub").addEventListener("click", () =>{
document.write("thank you");
});
</script>
or, if you don't want it to remove all your elements:
<button id="sub">Subscribe</button>
<p id="text"></p>
<script>
document.getElementById("sub").addEventListener("click", () =>{
document.getElementById("text").innerHTML = "thank you!";
});
</script>
<!DOCTYPE html>
<html>
<body>
<button id="sub" onclick="button(event)">Subscribe</button>
<script>
function button(event) {
var message = document.getElementById("message");
if (event) {
/*Pop up with thank you*/
alert("Thank you");
}
};
</script>
</body>
</html>
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>
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.