Is there a way to make this Javascript list ouput result to show images instead of numbers?

Question

I am struggling on how to make the result output into images like: image 1, image 2 so on... Is there way to store all those images in the javascript and then show them on the result?

Here's the script of what i am talking about, please bear with me, i am learning and i am not an expert.

function proRangeSlider(sliderid, outputid, colorclass) {
        var x = document.getElementById(sliderid).value;  
        document.getElementById(outputid).innerHTML = x;
        document.getElementById(sliderid).setAttribute('class', colorclass);
        
        updateTotal();
}

var total = 0;
function updateTotal() {
        var list= document.getElementsByClassName("range");
        [].forEach.call(list, function(el) {
            console.log(el.value);
            total += parseInt(el.value);
        }); 
        document.getElementById("n_total").innerHTML = total;
      
}
$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

$(function() {
    $('form').submit('click', function() {
        $(this).hide();
        $('html, body').animate({
     scrollTop: $("#anchor").offset().top
 }, 500);
        $("#result").empty().append(
            "<ul>" + Object.entries($('form').serializeObject()).map(e => `<li>${e[0]}: ${e[1]}`).join("") + "</ul>");
        $(".hidden-block").show();
        return false;
    });
});

$(document).ready(function(){
        $("#reset").click(function(){
            location.reload(true);
    });
});

Here's my project in case you would like to view the source: https://jsfiddle.net/archer201977/h9f6r21u/6/

Answer 1

I'm not sure what you mean by 'image' here, but maybe you want to display the slider within div#result?

Your code has some issues. To educate and entertain I've created a minimal reproducable example, presuming that by 'image' you mean the actual sliders. It

• does not use jQuery
• does not use inline event handling
• does use event delegation
• uses data attributes to be able to pass some state values etc.

document.addEventListener(`change`, handle);
updateTotal();

function handle(evt) {
  if (evt.target.dataset.inputstate) {
    return displayResult(evt.target);
  }
}

function displayResult(origin) {
  proRangeSlider(origin, ...origin.dataset.inputstate.split(`,`));
  let totalValues = [];
  document.querySelectorAll(`[data-inputstate]`).forEach(range => {
    const rangeClone = createClone(range);
    totalValues.push(`<li><div>${rangeClone}</div><div>${
        range.dataset.name}: ${range.value}</div></li>`);
  });
  totalValues.push(`<li><div><b>Total: ${
    document.querySelector(`#n_total`).textContent}</b></div></li>`);
  document.querySelector(`#result`).innerHTML = `<ul>${totalValues.join(``)}</ul>`;
}

function createClone(fromRange) {
  const clone = fromRange.cloneNode();
  clone.setAttribute(`value`, fromRange.value);
  clone.id = ``;
  clone.removeAttribute(`data-inputstate`);
  return clone.outerHTML;
}

function proRangeSlider(origin, outputId, colorclass) {
  origin.closest(`div`).querySelector(`#${outputId}`).textContent = origin.value;
  origin.setAttribute('class', colorclass);
  updateTotal();
}

function updateTotal() {
  let total = 0;
  [...document.querySelectorAll(`[data-inputstate]`)]
    .forEach(elem => total += +elem.value);
  document.getElementById("n_total").textContent = total;
}

body,
html {
  margin: 10px;
}

#proRangeSlider {
  border: 1px solid #CCC;
  padding: 0;
}

div {
  background: #f1f1f1;
  border-bottom: 1px dotted #666;
  padding: 2px 0px;
}

div:last-child {
  border: none;
}

input {
  -webkit-appearance: none;
  width: 160px;
  height: 15px;
  background: linear-gradient(to right, #16a085 0%, #16a085 100%);
  background-size: 150px 10px;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  outline: none;
  vertical-align: middle;
}

input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #27ae60;
  position: relative;
  z-index: 3;
}

#total {
  padding-left: 7px;
}

.blue::-webkit-slider-thumb {
  background: #2980b9;
}

.orange::-webkit-slider-thumb {
  background: #d35400;
}

#result {
  margin-bottom: 0;
  border: none;
  padding: 5px;
  background-color: transparent;
}

#result ul {
  margin-left: -1.5rem;
}

#result ul li div {
  display: inline-block;
  vertical-align: middle;
  background-color: transparent;
  border: none;
  padding: 0 3px;
}

#result ul li div input[type=range] {
  height: auto;
  margin-left: -0.4rem;
}

#result ul li {
  text-align: left;
}

<div id="proRangeSlider">
  <div id="total">TOTAL: <span id="n_total"></span></div>
  <div>
    <input type="range" data-name="Cost per day" class="range orange" value="20" data-inputstate="output1,orange">
    <output id="output1">20</output>
  </div>

  <div>
    <input type="range" data-name="Number of days" value="50" class="blue range" data-inputstate="output2,blue">
    <output id="output2">50</output>
  </div>

</div>
<div id="result"></div>

But ... you meant to create an image from some number, ok. This snippet may help. It uses an image sprite for the numbers.

const createNumber = nr => {
  const numbers = `zero,one,two,three,four,five,six,seven,eight,nine`
    .split(`,`);
  return [...`${nr}`]
    .map(n => `<div class="number ${numbers[n]}"></div>`)
    .join(``);
}

const example = nr => document.body.insertAdjacentHTML(
  `beforeend`,
  `<div class="example">${nr} => ${createNumber(nr)}</p>`);

example(1234567890);
example(233);
example(732);
example(1854);
example(42);

.example {
  height: 32px;
}

.example .number {
  vertical-align: middle;
}

.number {
  background-image: url('//sdn.nicon.nl/tests/numbers.png');
  background-repeat: no-repeat;
  width: 14px;
  height: 16px;
  display: inline-block;
  border: 1px solid #aaa;
  padding: 1px;
  margin: 0 1px
}

.number.zero {
  background-position: 3px 1px;
}

.number.one {
  background-position: -25px 1px;
}

.number.two {
  background-position: -51px 1px
}

.number.three {
  background-position: -77px 1px
}

.number.four {
  background-position: -103px 1px
}

.number.five {
  background-position: -129px 1px
}

.number.six {
  background-position: -155px 1px
}

.number.seven {
  background-position: -183px 1px
}

.number.eight {
  background-position: -209px 1px
}

.number.nine {
  background-position: -235px 1px
}