Change src of an action-based image on the previous page

Question

Hello, I need help to do the following pq I’m not getting at all: When I click a button (for example) I need to go to another page. So far ok. I need on this page the image to be displayed is replaced by a specific link.

Example: by clicking the jujube button.. go to the sweet page and replace the image src id="doces_img" to the src="jujuba.png"

js. if you need to use a framework, jquery. I thought maybe create a variable and change the value of it then when the page "candy" load, it will check the variable and replace the src to the desired. but if that’s what you need it to be cached.

Answer 1

As commented, a good solution is to use the LocalStorage, at a glance: https://jsfiddle.net/oy0vf3ng/1/

To preserve the code:

HTML

<button id="btnJujuba" type="button" src-img-dinamica="https://img.buzzfeed.com/buzzfeed-static/static/2015-07/29/10/enhanced/webdr15/enhanced-16875-1438181730-13.jpg">
  jujuba
</button>

<hr />

<img id="imgDinamica" src="http://galaxy.mobity.net/uploads/148/logo/1399898656.png" />

JS

var btnJujuba = document.querySelector('#btnJujuba');

btnJujuba.addEventListener('click', function() {
    var srcImgDinamica = this.getAttribute('src-img-dinamica');

    window.localStorage.setItem('srcImgDinamica', srcImgDinamica);

    loadImgDinamica();
});

function loadImgDinamica() {
    var imgDinamica = document.querySelector('#imgDinamica');

    var srcImgDinamica = window.localStorage.getItem('srcImgDinamica');

    if(srcImgDinamica) {
        imgDinamica.setAttribute('src', srcImgDinamica);
    }
}

The method loadImgDinamica() is to simulate the page exchange, IE, in its place you make the redirect and on this page you execute the code that is inside it.

Not all browsers and versions of them support API of LocalStorage, see: http://caniuse.com/#search=localstorage . To find out if the browser supports the LocalStorage simply test if it exists on the object window :

if(window.localStorage) {
    // da suporte
} else {
    // não da suporte
}

For this you can make the solution using cookies, see https://jsfiddle.net/7s4npn3q/2/

To preserve the code:

HTML

<button id="btnJujuba" type="button" src-img-dinamica="https://img.buzzfeed.com/buzzfeed-static/static/2015-07/29/10/enhanced/webdr15/enhanced-16875-1438181730-13.jpg">
  jujuba
</button>

<hr />

<img id="imgDinamica" src="http://galaxy.mobity.net/uploads/148/logo/1399898656.png" />

JS

var btnJujuba = document.querySelector('#btnJujuba');

btnJujuba.addEventListener('click', function() {
    var srcImgDinamica = this.getAttribute('src-img-dinamica');

    document.cookie = 'srcImgDinamica='+srcImgDinamica;

    loadImgDinamica();
});

function loadImgDinamica() {
    var imgDinamica = document.querySelector('#imgDinamica');

    var srcImgDinamica = document.cookie.split('=')[1];

    if(srcImgDinamica) {
        imgDinamica.setAttribute('src', srcImgDinamica);
    }
}

With cookies no longer have the danger of browser support, but to treat it is more "complicated" and "manual" because cookies do not work with "key and value" equal to the LocalStorage then you need to search within the String registered in the cookie to find the piece of information you want. Maybe turning a javascript object into JSON and saving on the cookie, then doing the parse from it to object javascript again improve access, I have not tested this just got this idea now.

But worth a look at the cookie documentation: https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

Another solution also as manual as using cookies is to use url parameter, I will not make a jsfiddle but it stays that way:

JS

var btnJujuba = document.querySelector('#btnJujuba');

btnJujuba.addEventListener('click', function() {
    var srcImgDinamica = this.getAttribute('src-img-dinamica');

    window.location.href='http://minhaurl?srcImgDinamica='+encodeURIComponent(srcImgDinamica);
});

// na outra página
function loadImgDinamica() {
    var imgDinamica = document.querySelector('#imgDinamica');

    var srcImgDinamica = getQueryParam().srcImgDinamica;

    if(srcImgDinamica) {
        imgDinamica.setAttribute('src', srcImgDinamica);
    }
}

function getQueryParam() {
    var queryString = {};
    window.location.search.substr(1).split('&').forEach(function (pair) {
      if (pair === '') return;
      var parts = pair.split('=');
      queryString[parts[0]] = decodeURIComponent(parts[1].replace(/\+/g, ' ')).replace(/\+/g, ' ');
    });
    return queryString;
}

That function getQueryParam is a function that transforms all Query Params of a url in a javascript object.

It can be said that the solution by URL is the least sophisticated, by LocalStorage the most sophisticated and the Cookie the intermediary between them.