logo
down
shadow

Javascript changing IMG not working


Javascript changing IMG not working

By : deep
Date : November 19 2020, 03:01 PM
fixed the issue. Will look into that further Okay, I fail to see the relevance of linking back to your website, unless you're self-promoting. I don't see an example there of what it is you're trying to do, from what you describe above.
To be sure I understand what you're trying to do, the first showSurpriseImage is intended to spawn an image element, and any subsequent clicks on the newly created element should only affect this new element? And you're trying to cause the new element to toggle between two animated gifs?
code :
var showSurpriseImage = function() {
  document.getElementById("boxmb").removeEventListener("click", showSurpriseImage);
  var x = document.createElement("IMG");
  x.setAttribute("id", "boxmm");
  x.setAttribute("class", "boxmm");
  x.setAttribute("src", "https://thumbs.dreamstime.com/t/do-red-button-isolated-white-background-56575889.jpg");
  document.getElementById("surprise").appendChild(x);
  x.addEventListener("click", showSurpriseImage2);
}


var showSurpriseImage2 = function() {
  var x = document.getElementById("boxmm");
  x.setAttribute("src", "http://media.idownloadblog.com/wp-content/uploads/2016/11/Animated-GIF-Banana.gif");
  x.setAttribute("class", "boxml");
  x.setAttribute("id", "boxml");
  x.removeEventListener("click", showSurpriseImage2);
  x.addEventListener("click", showSurpriseImage3);
}

var showSurpriseImage3 = function() {
  var x = document.getElementById("boxml");
  x.setAttribute("src", "http://www.thisiscolossal.com/wp-content/uploads/2014/03/120515.gif");
  x.setAttribute("class", "boxmm");
  x.setAttribute("id", "boxmm");
  x.removeEventListener("click", showSurpriseImage3);
  x.addEventListener("click", showSurpriseImage2);
}

var startEl = document.getElementById("boxmb");
startEl.addEventListener("click", showSurpriseImage);
.boxmb {
  width: 50px;
}

.boxml,
.boxmm {
  width: 200px;
}
<a class="boxmb" href="#section2">
  <img class="boxmb" id="boxmb" id="togglee" src="https://maxcdn.icons8.com/Android_L/PNG/512/Media_Controls/youtube_play-512.png" id="image1">
</a>
<div id="surprise">

</div>


Share : facebook icon twitter icon
Javascript: Changing src not working

Javascript: Changing src not working


By : Kenny Ledford
Date : March 29 2020, 07:55 AM
should help you out I'm calling a function like this: , thisid is just a string, not an element. Change your onclick to:
code :
onclick="AddLibrary(12345,this); this.onclick=null;"
function AddLibrary(pibnval,img) {
    $.post('/addlibrary.php', {
        pibn: pibnval
    }, function() {
    img.setAttribute('src', "/images/icons/tick.png");
    });
};
function AddLibrary(pibnval,img) {
    $.post('/addlibrary.php', {
        pibn: pibnval
    }, function() {
        img.src = "/images/icons/tick.png";
    });
}
Changing iframe src with JavaScript not working

Changing iframe src with JavaScript not working


By : Robin
Date : March 29 2020, 07:55 AM
it helps some times src is an attribute you can access directly so instead of your line elem.setAttribute('src', newsrc); just use this:
code :
elem.src = "http://www.youtube.com/embed/" + explosion[4] + "?autoplay=1";
Changing css via JavaScript conditional not working

Changing css via JavaScript conditional not working


By : Lekan Ali
Date : March 29 2020, 07:55 AM
wish help you to fix your issue I am trying to modify the css of a class depending on the URL. Here is the currently non-working code: , Encase your code in DOM Ready handler
code :
$(function() {
    // Your code
});
$(function() {
   var loc = location.pathname;
   if (loc === "/SearchResults.asp" || loc.indexOf("-s/") !== -1
                                    || loc.indexOf("_s/") !== -1
   $('.colors_productname span').css("background-color", "#F7F7F7");
});
Changing JavaScript to jQuery not working

Changing JavaScript to jQuery not working


By : user5553859
Date : March 29 2020, 07:55 AM
hope this fix your issue It's like @ssube said: You were passing a jquery object not a DOM node. I tried to accomplish what you wanted by traversing the DOM with JQuery objects and also passing the right DOM node elements to the API. Please refer to the working solution below:
code :
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
</head>
<body>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
    <script>
        var source, destination;
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        google.maps.event.addDomListener(window, 'load', function () {
            new google.maps.places.SearchBox($('#txtSource').get(0));
            new google.maps.places.SearchBox($('#txtDestination').get(0));
            directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
        });

        function GetRoute() {
            var mumbai = new google.maps.LatLng(18.9750, 72.8258);
            var mapOptions = {
                zoom: 7,
                center: mumbai
            };
            map = new google.maps.Map($('#dvMap').get(0), mapOptions);
            directionsDisplay.setMap(map);
            directionsDisplay.setPanel($('#dvPanel').get(0));

            //*********DIRECTIONS AND ROUTE**********************//
            source = $('#txtSource').val();
            destination = $('#txtDestination').val();

            var request = {
                origin: source,
                destination: destination,
                travelMode: google.maps.TravelMode.DRIVING
            };
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
            });

            //*********DISTANCE AND DURATION**********************//
            var service = new google.maps.DistanceMatrixService();
            service.getDistanceMatrix({
                origins: [source],
                destinations: [destination],
                travelMode: google.maps.TravelMode.DRIVING,
                unitSystem: google.maps.UnitSystem.METRIC,
                avoidHighways: false,
                avoidTolls: false
            }, function (response, status) {
                if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != 'ZERO_RESULTS') {
                    var distance = response.rows[0].elements[0].distance.text;
                    var duration = response.rows[0].elements[0].duration.text;
                    var dvDistance = $('#dvDistance');
                    dvDistance.html('');
                    dvDistance.html('Distance: ' + distance + '<br>');
                    dvDistance.html('Duration:' + duration);

                } else {
                    alert('Unable to find the distance via road.');
                }
            });
        }
    </script>
    <table border="0" cellpadding="0" cellspacing="3">
        <tr>
            <td colspan="2">
                Source:
                <input type="text" id="txtSource" value="Bandra, Mumbai, India" style="width: 200px" />
                &nbsp; Destination:
                <input type="text" id="txtDestination" value="Andheri, Mumbai, India" style="width: 200px" />
                <br />
                <input type="button" value="Get Route" onclick="GetRoute()" />
                <hr />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div id="dvDistance">
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="dvMap" style="width: 500px; height: 500px">
                </div>
            </td>
            <td>
                <div id="dvPanel" style="width: 500px; height: 500px">
                </div>
            </td>
        </tr>
    </table>
    <br />
</body>
</html>
My javascript is only working, it's not changing the text

My javascript is only working, it's not changing the text


By : SoaringDylan
Date : March 29 2020, 07:55 AM
I wish this helpful for you document.getElementsByClassName() will return an array of objects you need to specify the one you want to update.
Example :
code :
document.getElementsByClassName("jumbotron")[index].innerHTML = "BLASAKLSJL";
____________________________________________^^^^^^^
document.getElementsByClassName("jumbotron")[0].innerHTML = "BLASAKLSJL";
var elements = document.getElementsByClassName("jumbotron");

for(var i=0;i<elements.length;i++){
     elements[i].innerHTML = "new html here";
}
Related Posts Related Posts :
  • Chrome-Extension/JavaScript How to make all links on page have no effect?
  • Websocket issue Internet Explorer
  • sessionStorage value becomes null in other tab in AngularJS
  • Split URL from position x to the end in Javascript
  • How to set value of input field with NgIf in Angular 4
  • invalidStateError for second time screenshare on Chrome
  • How do you pass a value to the variable in a xhr.setRequestHeader?
  • I cant start nodemon on my windows 10
  • Nested if else jumps out from the main if else in javascript
  • Iterate through all collections and remove them
  • ES6 - Value of a variable in template string does not increment
  • how to get content of html table cell using javascript javascript depending on checkbox
  • Node.js Working with Multiple Tier SQL
  • Can't allow Cross-Origin Request in local Nodejs server
  • Datatables orderable=false directly on table
  • Dynamically load js content with iron router in meteor using array in return statement
  • Limit checkbox to 2, but moving the select instead of blocking it
  • Why itsn't displaying marker on map?
  • jQuery target next of the same class in the whole DOM
  • encoding must be a valid encoding error in process encoding
  • How to do a date range to view data from selected date highcharts
  • How do I refactor this composed function with Ramda.js?
  • jQuery to serialize selected option's value, not label
  • Convert object to Chartis.js structure
  • Dynamic import with not bundled file
  • Click handler not firing for elements rendered in Ajax Callback - only in Safari
  • Math.max.apply gives an error CreateListFromArrayLike called on non-object
  • get the parent nodes to a given node in d3 dendogram
  • is-dropdown-submenu-parent makes links unclickable on Opera and Chrome
  • JS: Sum column values and updating result on change
  • Query against nested object keys
  • Fullcalendar getting its parent colspan
  • How to retrieve a dynamic number of elements by id
  • How to access redux variables and functions from deep components
  • Efficiently access Array.prorotype.filter single-item returns
  • PHP var into Javascript
  • How to parse json with javascript/jquery if content matches string
  • How can I make a pyramid based on alphabet?
  • Javascript sorting a csv rows and displaying in table
  • How to get specific data from json from api using ajax. The json looks strange to me
  • react js html5 video not working
  • Javascript Angular 4 Change ngClass from another Component
  • Hide multiple table columns with javascript
  • Convert datetime to ISO Format using moment js
  • Dynamically adjust canvas size depending on content
  • setTimeout function with document on click
  • Need advice on nested Promises.all
  • Google Captcha expiration time
  • Syntax of Javascript TAPE unit test
  • Parse php json to javascript
  • Write to Internet Explorer javascript console with vba in excel
  • 2 Forms with Jquery
  • Why the loop stops right in the middle?
  • filter system for restaurant booking
  • how to add active class in framework nav menu when (add/edit) pages are opened
  • Port a js map in dart
  • How to get value from select using javascript
  • Audio won't be muted with JavaScript - removing audio tags with mutationobserver needed
  • How to include an HTML/Javascript game into reactJS website
  • Convert Nodejs server into node module
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org