How can I check the checkbox without causing an alert to pop up?
<div onclick="alert('test')">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
<input type="checkbox">
</div>
I attempted using pointer-events: none and z-index: 1000 but it didn't work.
Give this a try:
const checkbox = document.getElementById('myCheckbox')
const div= document.getElementById('myDiv')
var checkboxPrevState=checkbox.checked;
div.addEventListener('click',(event)=>{
var checkboxCurrentState=checkbox.checked;
if(checkboxPrevState==checkboxCurrentState){
alert("test");
}
else{
checkboxPrevState=checkboxCurrentState;
}
})<div id="myDiv">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
<input id="myCheckbox" type="checkbox">
</div>Avoid using inline event handlers as it is generally not recommended.
Instead, consider utilizing event delegation. Here is an example:
document.addEventListener(`click`, handle);
function handle(evt) {
if (+evt.target.dataset.clickable === 1) {
evt.target.dataset.nclicks = +evt.target.dataset.nclicks + 1;
console.clear();
console.log(`You clicked ${evt.target.dataset.nclicks} times!`);
}
}<div data-clickable="1" data-nclicks="0">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
<div><input type="checkbox"> check me</div>
</div>I am attempting to create a registration form using Ajax. I have a script that calls a registration function located in an includes folder outside of the public html folder. The output of this function should be alerted, but when I click the button, the al ...
Is it feasible to create a scenario where a child element has the ability to see through its parent, displaying the background image only within the child and not in the parent element as illustrated below? Can this be achieved using CSS or any other meth ...
My journey with Typescript is just beginning as I delve into using it alongside Ionic. Coming from a background in Java, I'm finding the syntax and approach quite different and challenging. One area that's giving me trouble is creating new object ...
I have integrated the phonegap-nfc library into my vue project, and it is working fine. However, I am facing an issue where the information from my NFC card is being displayed on a different page instead of within my app. I want to show all the information ...
In my current project, I am facing a challenge with two specific elements: one is a string formatted as ABC £12,56 and the other is a box called "Cashbox" that should be 15% of the value of the string. However, when attempting to locate the CSS for both e ...
How can I incorporate background images in nested divs? <div id="templatemo_content" style="padding: 30px 30px 0 0; background: #fff url(images/foot_bg.png) no-repeat 0 bottom; z-index:10"> This particular div displays a grey-colored background imag ...
I'm currently working on an application where users can create their own data. Without a backend or database, all the information is stored within the user's session. My preferred solution involves: User interacts with the app, clicks "Save", ...
Currently, I am in the process of automating form filling. After filling out the form, there is an update button that changes color instead of clicking when activated. This alteration indicates that the xpath is correctly identified. I have attempted two ...
Below is the configuration for my swagger: /** * @swagger * /api/addData: * post: * consumes: * - text/html * produces: * - text/html * parameters: * - name: author * in: body * required: true * ...
Initially, my signup form had some existing code that included an eye svg to adjust the text obstruction in the password input box. However, after implementing new logic, I noticed a strange occurrence - a black eye logo similar to the Windows one appear ...
I'm in a bit of a dilemma when it comes to titling my question. I'm currently experimenting with a Facebook signup API for my app. I have both my localhost:8000 URL and my live site URL. What I'm trying to achieve is for the API to recognize ...
In my jquery modal dialog box, I wanted to create a shadow effect only between the dialog box and the screen. To achieve this, I added an overlay using a <div>: <div id="overlay" class="overlay btn-hidden"></div> <d ...
Within the Javascript code below, I am initiating two Ajax requests simultaneously. Upon inspecting with Firebug, it was noted that there is an unusual behavior where: "whichever Ajax response arrives first is displayed last". Issue 2: If I set the Aj ...
While developing a Node chat application, I encountered an issue where I am unable to type anything in the terminal after entering "yarn start". The tutorial I am following shows that the instructor can still input commands in their terminal after running ...
Is it necessary to use the Jquery CSS file for adding icons, or is there an alternative method? I'm hoping I can avoid using it as I am working within Wordpress and enqueuing the Jquery CSS seems like a complex task for me. Apologies for the basic q ...
I am working on a bootstrap list-group with a vertical scrollbar and fixed height. The issue I am facing is that the active item is selected programmatically during group creation, but it ends up being out of view when the list is displayed. Is there a wa ...
I have a Node.js application where I am trying to load data into a jQuery datatable after the data has been fetched. Currently, I am able to populate the table with the data, but I am facing issues initializing the datatable. Here is how I render the temp ...
Here is a snippet of my PHP file: <?php $myObj = array( "name"=>"John" , "age"=>"30" , "post"=>[ "title"=>"What is WordPress" , "excerpt"=>"WordPress is a popular blogging platform" , ...
Recently in a project, I encountered an issue when loading a sound using JavaScript. When I used the following code: var myAudio = new Audio("myAudio.mp3"); myAudio.play(); The sound played fine until a dialogue box was opened (such as alert or confirm). ...
I'm having an issue with a hidden container that holds comments. Inside the container, there is a <div> element with a <p> tag that says "Show all comments". When I click on this element, it successfully displays the comments. However, cli ...