Having trouble with JavaScript not working when clicking an image and toggling a div?

Why isn't the onclick image and toggle div functionality working with JavaScript?

I made the change from:

<input type="button" id="Showdiv1" name="Showdiv1" value="Show Div 1" onclick="showDiv('div1')" />

to:

<img src="https://developer.apple.com/homekit/images/homekit-hero.png" onclick="showDiv('div1')" />

http://jsfiddle.net/a3MKG/36/

<script>
function showDiv(id) {    
  $("#div1").toggle();
}   

$(document).click(function(e){
    if(!$(e.target).closest('#div1, input[name="Showdiv1"]').length) 
    {
        $('#div1').hide()
    }
})
</script>

Answer №1

Include an ID for the image (shown below as IMGClick) and update your script with the following code:

$("#IMGClick").click(function(){
    $("#div1").toggle();
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with onclick event not being triggered by Javascript function inside constructor

My current challenge involves implementing a function called makeHighlight within the SmartButton constructor. The purpose of this function is to execute whenever I click on the SmartButton object, which is represented by an image element. To achieve thi ...

Issues with ng-click functionality in MVC partial view

I am currently working on a single page application that utilizes angular.js and MVC. Within the application, there are two partial views being called: Menu Accounts The Menu partial view loads successfully. However, I am encountering an issue with the ...

ReactJS: Trouble encountered while parsing information from JSON data

Currently, I am facing an issue while trying to pass data from my JSON file to my ReactJS application. The error message that I am encountering is as follows: TypeError: Cannot read property 'mainPage' of undefined Upon console.logging siteDa ...

The initial state in NextJS fails to update when routing to the same page with different parameters

This particular project utilizes NextJS The structure of my page's URL is as follows: localhost:3000/first/second When I invoke getInitialProps on this page, the data retrieved from it is passed to the component and used to set the initial state li ...

NodeJS is facing a severe challenge in properly rendering HTML and its accompanying CSS code, causing a major

Once upon a time, I built a beautiful website while practicing HTML, CSS, and JS. It had multiple web pages and used Express for the backend. Unfortunately, I lost all the files associated with it and took a break from web programming for some time. Now, w ...

What is causing ngResource to change the saved object to something like "g {0: "O", 1: "K", ..} once it receives a response?

In my current setup, I have a default ngResource that is defined in the following way: var Posts = $resource('/posts/'); Once I retrieve a blog post from my nodejs server using the code below: $scope.post = Posts.get({_id:query._id}); The use ...

The columns in CSS grid-template are refusing to change despite the media query code being applied and active

Currently, I am facing an issue while working on a site plugin and trying to utilize CSS grid to showcase posts. Despite the media query being active according to the inspector, the modification in the template columns is not reflecting as expected. Check ...

Is the purpose of express.json() to identify the Request Object as a JSON Object?

app.js const express = require('express'); const cookieParser = require('cookie-parser'); const session = require('express-session'); const helloRouter = require('./routes/hello'); const app = express(); app.set(& ...

What is the best way to place a div inside a navbar element inline?

Having a bit of trouble with my HTML code. I'm working on creating an offcanvas navbar. Here's the code snippet: <nav class="navbar navbar-dark bg-dark"> <div class="container-fluid"> <a cl ...

How can we leverage JavaScript to create logistic regression models for datasets and derive the beta-coefficients?

Exploring Logistic Regression in JavaScript In my current project, I am looking to fit a multi-variate logistic regression model to a dataset using JavaScript. My main goal is to extract the beta-coefficients for this model. Can anyone provide guidance on ...

jquery.event.drag - Execute code for each increment of X pixels dragged

Currently, I am utilizing jquery.event.drag.js for a project I am developing. My goal is to execute a script after every interval of X pixels dragged along the X axis. Below is a snippet of the code I have implemented. $('body').drag(function( e ...

What could be causing the HTML content to not display when the code is executed?

I've recently started using Visual Studio Code for my project. I am able to build my code without any errors, but when I run it, the HTML content does not display properly - only the CSS styling for the header and footer is visible. I have tried click ...

Using an outdated version of Node.js to set up a React App

Attempting to utilize Create React App but encountering an issue that demands Node 10 or above. Presently, my node version is Node 8.10.0 and unfortunately, I am unable to update the Node version as it's a work device. Is there a method to operate an ...

Import a JavaScript file with beneficial test functions for selenium testing

Utilizing the runScript command in selenium has proven to be incredibly helpful for me. I've been using it to calculate values within a table and then store the result like so: <tr> <td>runScript</td> <td>var cumulativ ...

Exploring the functionality of utilizing dual loops with v-for in Vue.js

I am facing an issue with my table code where I need to repeat it 6 times to match the day column above. I would like to use v-for and make use of a variable called "count" which represents the number of days. Can someone assist me with this task? <tabl ...

Using the object value to map an array and populate the resulting elements

i have a function const [jobs, setJobs] = useState([]) const addJob = (title, role) => { const newJobs = [...jobs, { title, role}] setJobs(newJobs) } whenever a form is submitted, the addJob function creates state data containing ...

How can one efficiently make API requests using Vuex?

Being new to both Vue Webpack and Vuex after transitioning from the Ember world, I have set up my Vue Webpack app with Vuex using vue-resource in two different files: /src/store/api.js import Vue from 'vue'; import { store } from './store& ...

Retrieve the post ID from the existing URL via AJAX in order to fetch data associated with that particular ID

Currently, I am facing an issue while trying to pass the id from the current URL to the select.php page. The error displayed is 'id not defined' and as a result, no data is being fetched. My goal is to retrieve data for the suporder index from th ...

Leveraging AJAX and PHP for generating PDF files

My web application is designed to function in a specific way - the user fills out a form, and then using AJAX, the form data is sent to a PHP file that utilizes xpdf to generate a PDF. The goal is for the generated PDF to be easily downloadable on the HTML ...

Switching the checkbox value upon clicking a div element

One challenge I am facing is with a checkbox that saves its value and title in the local storage when clicked. This checkbox is located within a div, and I want the checkbox value to change whenever any part of the div is clicked. Despite my efforts, I hav ...