Combining two functions into a single button: image changing

I'm currently facing an issue with assigning two actions to a single button. When I click on the image, it changes as expected. However, the action only triggers when clicking on the image itself and not on the button. Any thoughts on how I can modify the code so that clicking the button will also change the image and trigger the action?

Below is the code snippet:

  <a href="" class="btn btn-gray">
                <img src="images/icons/full.png" alt="" ng-click="candidates.setTableType(candidates.tableTypes.ADVANCED)"
                     ng-show="candidates.selectedTableType == candidates.tableTypes.SIMPLE">
                <img src="images/icons/full-hide.png" alt="" ng-click="candidates.setTableType(candidates.tableTypes.SIMPLE)"
                     ng-show="candidates.selectedTableType == candidates.tableTypes.ADVANCED">
            </a>

Appreciate any input, thank you!

htmlcssangularjs

Answer №1

To enhance the functionality, consider utilizing two <a> tags and transferring your ng-click and ng-show attributes to their respective links.

 <a href="" class="btn btn-gray" ng-show="candidates.selectedTableType == candidates.tableTypes.SIMPLE" ng-click="candidates.setTableType(candidates.tableTypes.ADVANCED)">
    <img src="images/icons/full.png" alt="">
</a>
<a href="" class="btn btn-gray" ng-click="candidates.setTableType(candidates.tableTypes.SIMPLE)" ng-show="candidates.selectedTableType == candidates.tableTypes.ADVANCED">
    <img src="images/icons/full-hide.png" alt="" >
</a>

Answer №2

Although I am still in the process of learning CSS/HTML, I was able to address your issue using a touch of JavaScript. Check out the solution here

Here is the HTML code:

<div class="btn" id="myDiv" onClick="bgcol()"><a href="https://www.google.com" target="_blank">LINK</a> </div>

And here is the JS Code:

 <script> function bgcol()
{ 
document.getElementById("myDiv").style.backgroundImage = "url('http://dataduppedings.no/subcube/Colour_Gradients/Cyan-Blue_256x256.png')"; 
 /* Remember to insert your image link here */ 
} </script>

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

JQuery: Implementing automatic selection in a selectbox

Seeking assistance on how to automatically preselect a value in a select box. I am trying to have the select box automatically choose admin aid VI, but my script is not functioning correctly. Can anyone provide guidance on this issue? Here is the HTML co ...

javascriptjqueryhtml

"Utilizing Bootstrap's form-check feature places the checkbox alongside the text

While attempting to create a checkbox using the Bootstrap form-check class, I encountered an issue with my code. Here is the snippet: <form> <div class="form-section"> <div>Title</div> <div class="form-check"> ...

htmlcssbootstrap-4

Flex bug in safari causing issues with inline form display

I have created a simple inline form using flexbox. However, I encountered an issue in Safari where the button loses its width. Here is a screenshot for reference: https://i.stack.imgur.com/3s5AR.jpg Interestingly, the form looks fine in all other browsers ...

htmlcsssafariflexbox

Center two distinct elements using Bootstrap's center-block class

Check out my code snippet below: <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="center-block" style="w ...

htmlcsstwitter-bootstrap

Issue with button click functionality within Angular grid's Celltemplate

Has anyone experienced issues with the click event not working when using celltemplate in AngularJS? $scope.format = function(val){ return val.replace(/\//g, ""); }; var executionColumns = { data: [], ...

javascriptangularjsangular-ui-gridcelltemplate

Retrieve the file for saving using the HttpPost method in Asp.Net MVC

In my Asp.Net MVC project, there is a page where users can edit data loaded into a table, such as changing images, strings, and the order of items. Once all edits have been made, the client clicks on a Download button to save the resulting xml-file on the ...

javascriptc#angularjsasp.net-mvchttp-post

Switch between display modes by clicking using collections

I am trying to figure out how to create a function that will only show content for the specific element in which my button is located. Currently, when I click the button it shows content for all elements with the 'one' class, but I want it to dis ...

javascripthtmlcss

Assigning data to a dropdown in AngularJS using two separate controllers

Currently working with angularJS, I am exploring ways to bind the value of a select element within the scope of controller A and use it as an argument for an ng-click call (specifically the getQuizByCampID() Function) in the scope of controller B. Initial ...

javascriptjqueryhtmlajaxangularjs

Struggling to send form data to the database

I've been working on sending form data to a database but for some reason, the data doesn't seem to be showing up when I check the database. Can anyone help me figure out what I'm doing wrong? I followed a tutorial on YouTube pretty closely, ...

phphtmlmysql

The md-select search filter currently functions according to the ng-value, but it is important for it to also

I am using a md select search filter with multiple options available. For instance: id: 133, label:'Route1' id: 144, label:'Route2' id: 155, label:'Route3' id: 166, label:'Route4' If I input '1' ...

javascriptangularjsselectangular-material

A guide to determining the date based on the selected item in a dropdown menu in Ionic2

As a newbie in Ionic 2, I am looking to calculate dates based on the dropdown item selected in my hybrid Ionic application. The page consists of two dropdowns: First Dropdown list https://i.sstatic.net/hGaLM.png Second Dropdown https://i.sstatic.ne ...

angularjsionic2hybrid-mobile-apphybridmulti-device-hybrid-apps

Can CSS be used to create curved dashed lines?

Is it possible to achieve dashed lines similar to the ones highlighted in the images below using only CSS? I have a responsive web page built with Bootstrap, and I need the dashed lines to adjust accordingly when the window width changes. https://i.sstat ...

javascripthtmlcsstwitter-bootstrap

Need help styling a CSS for an iFrame on the same domain as my website?

After doing some research and browsing through Stack Overflow questions, I've discovered that even if you don't have access to the iFrame's stylesheet, you can still make edits as long as it resides in the same domain as your webpage where y ...

htmlcssiframe

How is UI Router Extras causing unexpected errors in my unit tests?

QUESTION: - I am facing failures in my tests after installing ui-router-extras. How can I resolve this issue? - Is there a way to use ui-router-extras without causing test failures? If you want to quickly install this, use yeoman along with angular-full ...

javascriptangularjsunit-testingangular-ui-routerkarma-runner

Guide on how to toggle disabled input text box upon checking checkbox using JavaScript

When the checkbox next to the appended text box is checked, I want to disable that text box. The hard-coded text box is already disabled when its checkbox is checked. You can see the actual outcome by running the code snippet or check out the screenshots b ...

javascriptjqueryhtmlcheckbox

Incorporating HTML with ng-binds through transclusion

I have been developing an angular directive to enhance the functionality of ng-table by adding filtering and exporting features. The main goal is to make this directive reusable for multiple tables, which requires the <td> elements to be dynamic. To ...

javascripthtmlangularjsngtableangular-directive

The namespace 'pages' has not been registered

Attempting to load an index in this environment: ├── admin_material │   ├── admin.py │   ├── apps.py │   ├── forms.py │   ├── __init__.py │   ├── models.py │   ├── __pycache__ │   │  ...

pythonhtmldjangodjango-viewsdjango-templates

Header Customization and Post Layout on Tumblr

In my recent purchase, I acquired the Margaret Studio theme from themecloset on Tumblr. Upon adding my own logo, it unexpectedly resulted in the first image on my blog being cut off with a white strip that seems to be the 'background' of my logo ...

htmlcsstumblrtumblr-html

Delete the parent div when the button is clicked

trying to create a dynamic button system to add/remove inputs on clicks. I have the addButton working but not the deleteButton. What am I missing? $(document).ready(function() { var maxFields = 20; var addButton = $('#plusOne'); va ...

javascriptjqueryhtml

Using AngularJS to connect nested ng-repeat loops with keys referencing each other

I am trying to reference the key value from one repeat value to another. The concept is a bit complex, but you can see an example in this jsfiddle http://jsfiddle.net/u75us/163/ What I want to accomplish is getting the f_column value from the key_var arra ...

javascriptangularjsangularjs-ng-repeat