Swapping out images with a different image using angular.js

Need to switch out the image on my online exam paper with AngularJS and HTML at the end of the exam.

When I started the exam, I included img id="online_start" in my code along with css to display an image on the page.

CSS:

#online_start{
    background-image:url("start_exam.jpg");
    background-repeat:no-repeat;
    width:400px;
    height:150px;
}

Now, I want to replace that image with another one at the end of the exam using AngularJS.

Code:

<!DOCTYPE html>
<html>
<head>
... (omitted for brevity)
  </body>
</html>
javascriptcssangularjshtml

Answer №1

When working with CSS, you utilize a background-image, whereas in JavaScript, you use a src!

Instead of:

document.getElementById("online_start").src = "animatedthankyou.gif";

You can use:

document.getElementById("online_start").style.backgroundImage = "animatedthankyou.gif";

Answer №2

AngularJS goes beyond just fancy repeaters or magic double bindings; it simplifies your JS code by avoiding DOM manipulation in your controllers (which you may be doing).

You can achieve more with less. Utilize ng-style to dynamically change the background image URL:

<img id="online_start" ng-style="{background-image: myBackgroundUrl}">

Then, in your controller, update the background when necessary:

if(pos >= questions.length){
    $scope.myBackgroundUrl = 'url(animatedthankyou.gif)';
}

Much cleaner and more efficient, right?

Answer №3

Here is a suggestion: 

 $scope.myBackgroundUrl = {'background-image': 'url(animatedthankyou.gif)'};

To implement this, add the following code within the div that contains ng-controller:

    <img id="online_start" ng-style="myBackgroundUrl">

Refer to the example below for context:

  <!DOCTYPE html>
<html>
... (omitted for brevity)
</html>

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

Live tweet moderation made easy with the Twitter widget

Currently in search of a widget, jQuery plugin, hosted service, or equivalent that can be easily integrated into an HTML page. This tool should display and automatically update live tweets featuring a specific hashtag, only from designated accounts set by ...

javascriptjquerytwitter

How to Use Jquery UI Datepicker

Currently, I am delving into the world of JavaScript and have grasped some understanding of it. As I created a webpage with a date entry field, I require a calendar feature to enable date selection. The jquery UI datepicker (http://jqueryui.com/datepicker) ...

javascriptjquery

What is the best way to insert HTML elements in front of other HTML elements using a form and jQuery?

I am looking to insert new HTML elements before existing ones using a form and jQuery: Here is the initial HTML Code: <div class="main-content"> <h2 class="main-content-header">Projekte</h2> <div class="project-content"> ...

javascriptjqueryhtml

Steps to incorporate fancybox in a PHP MySQL gallery: Once the gallery is established, ensure that the path points to

After creating a gallery using PHP and a MySQL database, I encountered an issue when attempting to integrate fancybox. The gallery successfully fetches images from the upload folder, but fancybox does not use the default fancybox class. Below is a snippet ...

phpjquerycssmysql

The Effective Implementation of Ui-Select within UI-Grid

After receiving a positive response to my initial inquiry on this platform, I am excited to present another question. I have successfully implemented Brian Hamm's method for incorporating a ui-select in ui-grid. However, I seem to be facing an issue w ...

angularjs

Cleanse Data Before Passing from PHP to AngularJS

I encountered an issue with a long string that includes odd characters and quotes, like so: xxxxxxxxxxxxxxxxxxxxxxxxxxxxdewhriho "shfihewr32" fhihifhewt43t[sdfhiort]sfhishf"gg"fhdif This particular string is part of an object in my PHP file, specifically ...

phpangularjsscope

How can I fix the error "rootRef.current.contains is not a recognized function" when using the Transition Component in react-transition-group with the latest versions

I am in the process of updating a project from Material-UI 4 to MUI v5, and I have also upgraded react to v18. We utilize the Transition component from react-transition-group within a Modal in one of our components. However, I encountered an error stating ...

javascriptreactjsmaterial-uitransitionreact-transition-group

Switching downlink to top link when scrolling downwards

I have a downward scrolling link on my homepage that moves the page down when clicked by the user. However, I am struggling to make it change to a "back to top" link as soon as the user scrolls 10 pixels from the top. Additionally, I am having trouble with ...

javascriptjqueryhtmlcssscroll

Using Node.js: Retrieving a value from a function with an asynchronous call within

Is it possible to create a synchronous function that generates a random string and checks for existing files on Amazon Web Service S3 with the same name? The challenge lies in making this function synchronous, considering the asynchronous nature of calli ...

javascriptnode.jsasynchronousamazon-web-services

Closing the video on an HTML5 player using an iPad

My task is to incorporate a video into a website with a button to close and stop the video. Once closed, an image will appear below. Everything works perfectly on all browsers. The issue arises on the iPad... On the iPad, the "close" button does not wor ...

javascriptjqueryipadhtml

Retrieve service status using Javascript

Currently, I am working on a web application that receives user updates from a different domain's web service. My goal is to retrieve these updates every 10 seconds. To initiate the service call for the first time, I implement a script insertion dyna ...

javascriptajaxdom-eventscross-domain

Update the menu-link class to active for a single-page website

Currently, I have a one-page website that serves as a portfolio. The website features a menu at the top with links that direct visitors to specific sections of the page using # as links. I am looking to enhance the user experience by implementing a functi ...

jqueryhtmlcss

Include the HTTP header in a GET request for an HTML hyperlink

Within my HTML code, I am using an <a> tag that will trigger a 302 redirect when clicked. However, I need to incorporate some HTTP headers into this GET request. Is there a way to achieve this without including the headers in the href attribute? Tha ...

javascriptjqueryhtmlajax

Retrieve a targeted tag from the API snippet

I need to extract the IMG SRC tag from the given code: <pod title="Scientific name" scanner="Data" id="ScientificName:SpeciesData" position="200" error="false" numsubpods="1"> <subpod title=""> <plaintext>Canis lupus familiaris</plain ...

phphtmlimagetagssrc

OpenLayers: real-time data display of objects from a list

When working with OpenLayers, I encountered an issue where my object was undefined and I couldn't retrieve the information I needed to display feature data on the map. Initially, I passed a list from the controller to my JSP file and attempted to use ...

javajavascriptopenlayers

Transmit information back to ASP.NET using AngularJS

As a newcomer to coding, I have a question. I am retrieving data from my database using C# and AngularJS, modifying it, and then sending it back. Eventually, I will need to save the modified data in the database. Here is my code, thank you in advance. The ...

javascriptc#angularjshttp

Ways to eliminate color from a link upon clicking a different one

I had a specific idea in mind - to create a simple menu bar where clicking on a particular link would display related content below. The chosen link should turn blue when selected. I managed to come up with the following code: <a href="#" class="link"& ...

javascriptjqueryhtmlcsshyperlink

Issue encountered while using Axios to send an http request to a server

I am facing an issue when making a GET request to the jasonplaceholder server to fetch data. Sometimes, the request returns undefined for a brief period before fetching all the data. How can I prevent this undefined response and halt the code execution u ...

javascriptreactjshttpaxiosnext.js

Tips for handling promise coverage within functions during unit testing with Jest

How can I ensure coverage for the resolve and reject functions of a promise within a function while conducting unit tests using Jest? You can refer to the code snippet below. Service.js export const userLogin = data => { return AjaxService.post( ...

javascriptreactjsunit-testingjestjscode-coverage

When utilizing jQuery, HTML code may fail to render correctly

My JSP page contains the following HTML code. Interestingly, when <script type="text/javascript"> $("#department").autocomplete("department.jsp",{minChars: 4}); is placed after the first input type, the other fields do not show up in Internet ...

jqueryhtmlinternet-explorerbrowsercross-browser