Learn the process of swapping an image with a button to trigger an onclick function using JavaScript

Currently, I am using an image button in JSP to trigger a JavaScript function upon click. The code snippet I have is as follows:

<img src="<%= imagesDir%>/bt_pre.gif" onclick="return PreviousQ();" id="prevbtn" style="cursor: hand;">

The above code works perfectly fine. However, when I tried to update it using the button tag, the onclick function does not seem to get called successfully.

<button class="css-button-rounded" onclick="return PreviousQ();" id="prevbtn" style="cursor: hand;">Back question</button>

I'm wondering how can I achieve the same functionality of calling onclick="return PreviousQ();" and id="prevbtn" with the button element?

Thank you very much!

javascriptjqueryhtmlcss

Answer №1

If my interpretation of the inquiries is accurate, jquery can help accomplish a similar task.

$(document).ready(function(){
    $("#nextbtn").on('click',function(){
        $(this).next();
    });
});

Answer №2

<img src="http://s5.tinypic.com/15rf4zn_th.jpg"  id="prevbtn" style="cursor: hand;">

<button class="css-button-rounded" onclick="document.getElementById('prevbtn').src='http://s5.tinypic.com/vew3n7_th.jpg'"; >Go back</button>

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

Experience the power of dynamic site regeneration with GatsbyJS

Currently, I am working on a website built in GatsbyJS that deals with large datasets of dynamic content fetched using React fetch upon page load. The challenge here is to display semi-live data that updates every 5 minutes. I am curious about how I can m ...

javascriptnode.jsgatsby

Issue with Java Script inheritance in google.maps.OverlayView not functioning as expected

UPDATE: After spending another day working on this, I believe I have identified the issue, although it is not yet confirmed. Once I have verified the solution, I will update this post with an answer. My current understanding is that the problem arises fro ...

google-mapsgwtjavascript

The Best Way to Display Quad Wireframe in Three.js using OBJ Model

I am trying to display the wireframe of OBJ meshes using Three.js. However, Three.js can only render triangles, so I came up with the idea of creating a line for each edge of the model. After parsing the OBJ file and iterating through its vertices and fac ...

javascriptthree.js3d

What is the best way to continuously update CSS styles within a loop?

My goal is to create a function that will change the left position of a <div> element in a loop, making it appear as though it is moving. However, instead of smoothly transitioning, the element just jumps to its end position. function animateElement ...

javascriptjquery

The bootstrap card layout breaks with Google Maps in Chrome and is not functioning properly

I have encountered an issue with the bootstrap card layout and Google Maps integration. When I move the Google Map to a card in a right column, it does not display properly. However, placing it in the first column works perfectly fine. This problem seems t ...

javascriptcssbootstrap-4

Error message found: "Uncaught TypeError: e[n] is undefined while setting up redux store in a reactjs application

Delving into the world of Redux for the first time, I decided to tackle the Todo List example from the official redux.js.org website. After testing the code, everything seemed to be working fine with the redux store initialized only with the reducer as a p ...

javascriptreactjsreduxreact-redux

Retrieve the output of a Node.js function

I have a function that extracts data from a website and displays it in the console. However, I now want to return this data so I can perform additional actions with it. Instead of using console.log(temperature), I would like to retrieve the temperature v ...

javascriptnode.jsexpressreturncheerio

Issues with Angular ngroute: controllers are not functioning properly

In order to route my application with different themes on the same page, I plan to utilize the ngroute module. Here's an example of how I intend to achieve this: <html> <head> <title>Angular JS Views</title> ...

javascripthtmlangularjsngrouteroute-provider

What are some methods for customizing the calendar icon displayed in an input field with type date?

Is there a way to customize the calendar logo without relying on jquery? The desired appearance should resemble the image shown below: https://i.sstatic.net/G06iZ.png input { width: 50%; padding: 8px; border-radius: 10px; ...

htmlcsssassbootstrap-4

Tips on placing a white background behind fa-3x (Font-awesome) icons

I am facing challenges while trying to customize the background behind my font-awesome icons. My goal is to create a white background that does not extend beyond the actual icon itself. Currently, the result looks like the image below: https://i.sstatic. ...

css

Struggling to generate a cookie through an express middleware

I'm currently working on setting up a cookie for new user registrations in my app to track their first login attempt. I came across this thread which provided some guidance but I'm still facing issues. Below is the snippet of my code: // Middle ...

javascriptnode.jsexpresscookies

Exploring the Node.js view object within a function and delving into the reasons why a property of

As a beginner in programming, I am seeking tips on how to effectively learn node.js. Currently, I am utilizing the "Learning Behavior Driven Development with JavaScript" book for my learning journey. I would greatly appreciate any advice on how to view ob ...

javascriptnode.jsjsonfunctionbdd

Using AngularJS to hide elements within a nested dictionary structure

My dictionary structure is as follows: var data = { a: [1, 2, 3, 4, 5], b: [ [1, 2], [3, 4], [5, 6] ] }; Currently, I am using ng-hide to hide an element if the value 2 exists in data->a. Here's how it's implemented: <i ...

javascriptangularjsangularjs-ng-repeatangularjs-filterangularjs-ng-show

Angular's ngSubmit is malfunctioning

Check out this code snippet: <form data-ng-submit="ctrl.filter()" novalidate="true" class="search-filter ng-valid ng-dirty ng-valid-parse"> <fieldset> <div class="search-filter-group"> <div class="s ...

javascriptangularjs

CSS3: What is causing this issue in FireFox?

http://jsfiddle.net/tNg2B/ It's clear that there is a noticeable difference when viewing this in Chrome compared to Firefox. The ":before" and ":after" pseudo classes seem to be malfunctioning in Firefox. Is there a way to resolve this issue? Edit: ...

firefoxcss

Replacing an Angular 2 application with a new webpage

I've been working on a project using Angular 2 and following this tutorial: Every time I run my api with npm run api on localhost:3000, the entire application gets replaced by another webpage. https://i.sstatic.net/5pIfX.png Here is my package.json ...

javascriptangularjsnode.js

Flashing background color appears as I scroll

Whenever a user touchstarts on a div, I want to apply a background-color to that specific div. Then, as the user scrolls, I use the $(window).scroll event to either reset or remove the background-color from all divs. However, my issue arises when a user b ...

javascripthtmljquerycss

Get a captcha using Selenium in Java

I am currently working on obtaining a CAPTCHA image. My previous question mentioned this in this post. I have managed to successfully fill out the necessary forms and download the CAPTCHA, however, it appears to be random each time. This is my current co ...

javahtmlseleniumxpathimagedownload

Displaying Sweet Alert 2 in the Parent Frame

I am facing an issue with an iframe that has a php file as its source. My goal is to have Sweet Alert 2 open in the parent frame instead of inside the iframe. I have attempted to change the target but without success. None of the target options below have ...

jqueryhtmlsweetalert2

Disable a href link using Jquery after it has been clicked, then re-enable it after a

There are several <a target="_blank"> links on my website that trigger API calls. I want to prevent users from double clicking on these buttons. This is what I have tried: .disable { pointer-events: none; } $(document).ready(function(e) { ...

javascriptjquery