replace value with image on load javascript

Question

I create a table

I want to change the status column with a green image if 778. and a red image if 779. this is my html form code

<td> {{$penalty}}  </div>
<td> {{$Total)}}  </div>
<td> <span id="status">{{$status}}</span>   </div>

So, if people open the webpage, they will not see the status column with number again, but become an image.

var status = document.getElementById("status").innerHTML;
    if(status == 778){
        $('#status').attr('src','https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Button_Icon_Green.svg/200px-Button_Icon_Green.svg.png');
    }else{
        $('#status').attr('src','https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Button_Icon_Red.svg/200px-Button_Icon_Red.svg.png');
    }

Any javascript idea? thanks in advance.

You've added the src attribute to a span tag. You should be using an img tag and adding the attribute to that. — DVJex
– DVJex, Commented Sep 26, 2016 at 6:57
@Rayon @ Newbee Dev @ DVJex I've changed src into ng-src, but it did not happen. still appeared as number 778 — ardi gunawan
– ardi gunawan, Commented Sep 26, 2016 at 7:11
@ardigunawan — It is not about just chaning ng-src, you are suupose to manipulate src path as well.. — Rayon
– Rayon, Commented Sep 26, 2016 at 7:12

Community · Accepted Answer · 2017-05-23 12:19:26Z

Your html is invalid, because:

id needs to be unique, not repeated in each row - use a class instead.
You're closing <td> elements with </div> tags.

Assuming you fix that, you then have the problem that your JS is trying to set the src of a <span> element, but you need an <img>. It is simple enough to insert the appropriate images using the :contains() selector and the .html() method:

$(document).ready(function() {

  $('.status:contains(778)').html("<img title='778' src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Button_Icon_Green.svg/200px-Button_Icon_Green.svg.png'>");

  $('.status:contains(779)').html("<img title='779' src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Button_Icon_Red.svg/200px-Button_Icon_Red.svg.png'>");

});

img { height: 30px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr><td>{{$penalty}}</td><td>{{$Total)}}</td><td> <span class="status">778</span></td></tr>
<tr><td>{{$penalty}}</td><td>{{$Total)}}</td><td> <span class="status">779</span></td></tr>
<tr><td>{{$penalty}}</td><td>{{$Total)}}</td><td> <span class="status">778</span></td></tr>
</table>

I've set each <img> element's title attribute to either 778 or 779 so the user can see the values if they hover the mouse over the images. Note that using .html() will overwrite the text of the <span> with the <img>. If you want the numbers to be displayed beside the images then use .append() or .prepend() instead of .html(). If you want the images as background with the number on top of the image then do something with CSS like in O_Z's answer.

O_Z · Accepted Answer · 2016-09-26 08:29:48Z

1

If you can use CSS it's better then script.

<style>
    .im{
            background:url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Button_Icon_Green.svg/200px-Button_Icon_Green.svg.png")  no-repeat;
            display:inline-block;
            height:10px;
            width:10px;
            background-size: contain;
        }
        .im[status="778"]{  
            background:url("https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Button_Icon_Red.svg/200px-Button_Icon_Red.svg.png")  no-repeat;
        background-size: contain;
        }
           </style>
    <table>
    <tr>
    <td> {{$penalty}}  </td>
    <td> {{$Total)}}  </td>
    <td> <span id="status" >{{$status}}</span>  <span class="im" status="{{$Total)}}"></span> </td>
    </tr>
    </table>

I added a property status="{{$Total)}}" to the span which affects the CSS. This way you will not have on load issues, and it will work faster.

Here is the fiddle:https://jsfiddle.net/ngdtfuej/ Just change the status property from 778 to something else,click the fiddle run, and see how red becomes green (or reverse it if U like).

edited Sep 26, 2016 at 8:29

answered Sep 26, 2016 at 7:14

O_Z

1,5639 silver badges11 bronze badges

2 Comments

O_Z Over a year ago

@ardigunawan sorry, fixed it. U have a working fiddle now. I just reversed red and green but you get the point.

ardi gunawan Over a year ago

wow I'm so sorry, it also fixed my problem... I've try this thankyou so much @O_Z ... But I cannot mark 2 answer as accept here?

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

Use ng-src with ternary operator

Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.elems = [{
    penalty: 0,
    total: 100,
    status: 778
  }, {
    penalty: 0,
    total: 200,
    status: 779
  }, {
    penalty: 0,
    total: 300,
    status: 778
  }]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="myApp" ng-controller="myCtrl">
  <tr>
    <th>Penalty</th>
    <th>Total</th>
    <th>Status</th>
  </tr>
  <tr ng-repeat="el in elems">
    <td>{{el.penalty}}</td>
    <td>{{el.total}}</td>
    <td> <span class="status">
      <img ng-src="{{el.status==778?'https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Button_Icon_Green.svg/200px-Button_Icon_Green.svg.png':'https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Button_Icon_Red.svg/200px-Button_Icon_Red.svg.png'}}" alt="">
    </span>
    </td>
  </tr>
</table>

Fiddle Demo

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 26, 2016 at 7:37

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

2 Comments

ardi gunawan Over a year ago

Thank you for the answer, but I refer to these can not be used for looping

Rayon Over a year ago

It could be used without loop as well.. I prefer to avoid jQuery with Angular.. It could depend on indivual choice...

Collectives™ on Stack Overflow

replace value with image on load javascript

3 Answers 3

Comments

2 Comments

Fiddle Demo

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related