I found this html code on a website which is a click button and I want to learn how to click on this button using Javascript. Please someone help me to understand how to click such buttons. I'm trying this from past one hour.
This is the button which I want to click:
<div class="Button">
Tap this button
<div id="ButtonTwo" class="ButtonTest2">
<p class="MeButton" id="ButtonID">Final button test</p></div>
this is not my code. Its from a website.
You need to close the first div with a closing tag. Below is the updated code with the closing tag.
<div class="Button">
Tap this button
</div>
<div id="ButtonTwo" class="ButtonTest2">
<p class="MeButton" id="ButtonID">Final button test</p>
</div>
What is the purpose of enclosing your a tag in a div ? Can't you use only the a ?
You do not have any button in the HTML snipper shown, only div, a, and p
A button would be a <button>.
to click them using your current code you can use
<script>
document.getElementsByClassName("button")[0].click();
document.getElementsById("ButtonID").click();
</script>
A correct, valid and clear code would be
<!-- What is this button meant to do ? Can you use an actual button or do you HAVE to use a <a> ?
<button id="clickUsingJs" class="button yellow-btn addToCart trackEvent" rel="Thebutton" data-action="Tap">
Tap this button
</button>
<script>
document.getElementById("clickUsingJs").click();
</script>
<div class="Button" id="button1" onclick ="call some javascript method">
Tap this button
<div id="ButtonTwo" class="ButtonTest2" onClick="call some javascript method">
<p class="MeButton" id="ButtonID">Final button test</p></div>
try this
Related
I have a doubt that I can't solve. From a PHP page I call a typical modal window in which I always had a button that updated or added or deleted records, but now I need to place 2 buttons and that the new button allows me to call a PHP page in which I have a code that downloads data and passes it to an Excel file. I don't know how to make the call to that page from the button in the modal window.
<div class="mb-3 row">
<div class="col-md-6 text-center">
<button type="submit" class="btn btn-primary">update</button>
</div>
<div class="col-md-6 text-center">
<button type="button" class="btn btn-success">download detail</button>
</div>
</div>
I would appreciate any help. Thanks
In Bootstrap, you can use same button classes for <a> tag as well:
The .btn classes are designed to be used with the <button> element.
However, you can also use these classes on <a> or <input> elements
(though some browsers may apply a slightly different rendering).
So your button should be done like this:
download detail
I have a popup form in html based website ,in popup form there are three options,if I click on first option then it goes to that particular section,but popup form remains there.if I click on close then form will close.but I want automatically form close if I visit particular section.
below is my code.
Picture of the website
<html>
<body>
<!-- popup form start here -->
<div id="popScroll">
<div class="popScroll">
<div class="popup">
<div id="option">
<!-- Home -->
<!-- Close -->
<!-- <button class="btn" id ="close-btn"> Close </button> -->
<div class="text">
<img src="demo.png" alt=""><br>
Chemical
</div>
<div class="text">
<br>
logistics
</div>
<div class="text">
<img src="demo.png" alt="polymer">Polymer
</div>
<!-- <span onclick="document.getElementById('popScroll').style.display='none'" class="w3-button w3-display-topright" class="boxi">Close</span> -->
</div><br><br>
<span onclick="document.getElementById('popScroll').style.display='none'" class="w3-button w3-display-topright" >Close</span>
</div>
</div>
</div>
</body></html>
I'm not exactly sure what you are trying to achieve but I assume you want to close a popup whenever you scroll down to a certain section within your site?
To achieve this, you could use the Intersection Observer.
More information here: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
What you can do is add click functionality on options using click listener and close modal after a user clicks on options.
// NOTE: choose appropriate id according to your code
const popup = document.querySelector('#popup'); // id is popup id
const first = document.querySelector('#first'); // first is id of first option
first.addEventListener('click', function sectionClickListeners() {
// Perform some tasks...
popup.style.display = 'none';
})
This website gives a good understanding of using modals and gives different examples.
https://jquerymodal.com/
I have an element with an hyperlink. Inside the are also buttons, which should trigger their button actions, without triggering the hyperlink.
Demo code:
<a href="element.html">
<div class="element_card">
This is an card for an element with an hyperlink over the card.
<button type="button" onclick="like_element()">
Like the element but do not trigger the hyperlink.
</button>
</div>
</a>
How can I disable the hyperlink for the button or cancel the event, so that the button area ia only triggering the onclick function for the button but not the hyperlink.
You can use event.stopPropagation() to block the click from travelling up the chain.
You can use event.stopPropagation() to prevent further propagation of the current event in the bubbling phases.
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
See if this works for you.
The default behavior of the <a> tag's onclick and href properties is to execute the onclick, then follow the href as long as the onclick doesn't return false, canceling the event (or the event hasn't been prevented)
See if this works for you.
Answer
<a href="element.html">
<div class="element_card">
This is an card for an element with an hyperlink over the card.
<button type="button" onclick=" return like_element()">
Like the element but do not trigger the hyperlink.
</button>
</div>
</a>
using this inside href javascript:void(0)
function like_element(){
console.log('working....!')
}
.element_card{
background-color: green;
}
<a href="javascript:void(0)">
<div class="element_card">
This is an card for an element with an hyperlink over the card.
<button type="button" onclick=" return like_element()">
Like the element but do not trigger the hyperlink.
</button>
</div>
</a>
I am working on a simple HTML/JavaScript project. In this I have a main div, in this div I have another div which is not visible initially.
<div>
<div class="warning" id="time-alert" style="visibility:hidden">
<span style="font-weight:bold">your time is up To extend the time click on
extend button.
<input type="button" id="extend-btn" onclick="clickaction()" value="Extend">
</div>
<div class="create pull-right">
<button id="btn-create" type="button" class="btn btn-primary"
onClick="openmodal()">open modal</button>
</div>
</div>
When user clicks on open modal button, a Bootstrap modal pops up. Now I am making that time-alert div visible continuously on 2 minutes interval by JavaScript. When I am on home page it's working fine but if model has already opened on the screen, the alert div is not showing above the modal. Can you please tell me how can I do this with JavaScript?
Try to put the HTML of your bootstrap modal before the "time alert" div. That way, the modal box should stay behind the time alert. You may want to add a z-index to the CSS of the time alert if need be.
The field Description is optional and only appears when the user clicks on the + Description button. However when another div is generated the code loses the focus of the element it should hide and the button doesn't work anymore.
<script>
$(document).ready(function(e){
$(document).on('click', '#hide-desc', function(e) {
$("#description").slideToggle();
});
});
</script>
I have a button to remove and add the following div:
<div class="item-wrapper">
<div class="item-inner-wrapper">
<!-- Among other stuff -->
<div id="description" class="item-child-desc">
{{ form }}
</div>
</div>
<div class="item-action-button">
<!-- Deletes item-wrapper and another button adds it -->
<a id="delete" href="#" class="button alt small special">Remove</a>
<a id="hide-desc" class="button alt small">+ Description</a>
</div>
</div>
I know the function must be able to identify which description I am talking about, but I don't know how to do that. I tried to get the parent div of the button and specify the div with method find() but I could not make it work.
I have the same problem happening with an autocomplete function. I believe I will get both working if I can figure out what I have to do.
Based on your comments, I assume your html sort of looks like this (note that we use .description rather than #description since those are not unique elements):
<div class="item-wrapper">
<div class="item-action-button">
<a id="delete" href="#" class="button alt small special">Remove</a>
<a id="hide-desc" class="button alt small">+ Description</a>
</div>
<div class="description" class="item-child-desc">
blergh
</div>
</div>
We just have to look for the parent .item-wrapper using e.target to reference the source of the event then search the child .description:
$(e.target).parents(".item-wrapper").find(".description").slideToggle();
Based on the sample html you've added, the following should also work without modification:
$(e.target).parents(".item-wrapper").find(".item-child-desc").slideToggle();
It's also possible to just use this:
$(this).parents(".item-wrapper").find(".item-child-desc").slideToggle();
In all cases, the crucial part is parents(".item-wrapper").
I'm not entirely certain of the question, but if my understanding is correct I believe I may have found a solution for you. Using jQuery Event Delegation, it's relatively simple!
Run this code snippet and see if I'm close to a solution:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-action-button"> Remove
<a class="hide-desc button alt small">+ Description</a>
<div class="item-child-desc">{{ form }}</div>
</div>
<div class="item-action-button"> Remove
<a class="hide-desc button alt small">+ Description</a>
</div>
<div class="item-action-button"> Remove
<a class="hide-desc button alt small">+ Description</a>
<div class="item-child-desc">{{ form }}</div>
</div>
<div class="item-action-button"> Remove
<a class="hide-desc button alt small">+ Description</a>
</div>
<script>
$(document).ready(function (e) {
$(".item-action-button").on('click', '.hide-desc', function (e) {
$(e.delegateTarget).find(".item-child-desc").slideToggle();
});
});
</script>
<style>
.item-child-desc {
display: none;
}
</style>
The problem with using ids for event handling is that they are only ever registered with the last element with that matching id. If you want one event handler for all elements of a certain type, register an event handler with elements of a certain class or tag. You'd be doing yourself a disservice otherwise.
Hope this helps!