使用javascript将实时数字相乘和格式化

Question

I'm very very inexperienced with javascript, and I'm running into a snag that I can't find the answer to.

Here's what I'm working on: http://www.vibralifeusa.com/slider-test/

Here's what I'm trying to do: When you drag the slider back and forth I want whatever number is selected by the user (div id "downText") to be multiplied and formatted into the four divs "perYear", "perTwentyFive", "perMonthCoal", "perMonthSolar". Here's the code I wrote to accomplish this:

 var a = document.getElementsByClassName('downText')[0].innerHTML; document.getElementsByClassName('perYear')[0].innerHTML = parseInt(a*18.4); var a = document.getElementsByClassName('downText')[0].innerHTML; document.getElementsByClassName('perTwentyFive')[0].innerHTML = parseInt(a*460); var a = document.getElementsByClassName('downText')[0].innerHTML; document.getElementsByClassName('perMonthCoal')[0].innerHTML = parseInt(a*1); var a = document.getElementsByClassName('downText')[0].innerHTML; document.getElementsByClassName('perMonthSolar')[0].innerHTML = parseInt(a*0.79); 

 <div class="downText" id="downText"></div> <div class="perYear" id="perYear"></div> <div class="perTwentyFive" id="perTwentyFive"></div> <div class="perMonthCoal" id="perMonthCoal"></div> <div class="perMonthSolar" id="perMonthSolar"></div> 

The first issue is, it only multiplies the number I physically code into the div. (I put 100 into the div manually to make sure it was actually multiplying), it doesn't update that multiplied number as you drag the slider.

The second issue is that I can't get these numbers to format AND multiply at the same time. This is the code I tried adding, but when I do, it stops multiplying the numbers:

 var formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, }); var amount = document.getElementById('downText').innerHTML; document.getElementById('perYear').innerHTML = formatter.format(amount); var amount = document.getElementById('downText').innerHTML; document.getElementById('perTwentyFive').innerHTML = formatter.format(amount); var amount = document.getElementById('downText').innerHTML; document.getElementById('perMonthCoal').innerHTML = formatter.format(amount); var amount = document.getElementById('downText').innerHTML; document.getElementById('perMonthSolar').innerHTML = formatter.format(amount); 

I know this is really basic stuff, but I'm seriously very inexperienced with javascript and can't figure this out despite working on it for hours, so any help would be greatly appreciated!

Answer 1

I'm just taking a stab at this here without testing but I think you're gonna have to run all your calculations within the "dragUpdate" function. Maybe this will do?

function dragUpdate() {
    dragVal = Math.round((this.target._gsTransform.x / maxDrag) * 1000);
    select('.downText').textContent = select('.upText').textContent = dragVal;

    document.getElementById('perYear').innerHTML = parseInt(dragVal * 18.4, 10);
    document.getElementById('perTwentyFive').innerHTML = parseInt(dragVal * 460, 10);
    document.getElementById('perMonthCoal').innerHTML = parseInt(dragVal * 1, 10);
    document.getElementById('perMonthSolar').innerHTML = parseInt(dragVal * 0.79, 10);

    TweenMax.to('#display', 1.3, {
        x: this.target._gsTransform.x
    })

    TweenMax.staggerTo(['.upText', '.downText'], 1, {
        // x:this.target._gsTransform.x,
        cycle: {
            attr: [{
                x: this.target._gsTransform.x + 146
            }]
        },
        ease: Elastic.easeOut.config(1, 0.4)
    }, '0.02')
}

Answer 2

The bug was introduced because you weren't updating value on on dragUpdate function. I just moved your multiplication logic code in dragUpdate function and it's working. You have placed the code below and expecting it to update on slider drag.

 var xmlns = "http://www.w3.org/2000/svg", select = function(s) { return document.querySelector(s); }, selectAll = function(s) { return document.querySelectorAll(s); }, container = select('.container'), dragger = select('#dragger'), dragVal, maxDrag = 300 //center the container cos it's pretty an' that TweenMax.set(container, { position: 'absolute', top: '0%', left: '0%', xPercent: 0, yPercent: 0 }) TweenMax.set('svg', { visibility: 'visible' }) TweenMax.set('#upText', { alpha: 0, transformOrigin: '50% 50%' }) TweenLite.defaultEase = Elastic.easeOut.config(0.4, 0.1); var tl = new TimelineMax({ paused: true }); tl.addLabel("blobUp") .to('#display', 1, { attr: { cy: '-=40', r: 30 } }) .to('#dragger', 1, { attr: { //cy:'-=2', r: 8 } }, '-=1') .set('#dragger', { strokeWidth: 4 }, '-=1') .to('.downText', 1, { //alpha:0, alpha: 0, transformOrigin: '50% 50%' }, '-=1') .to('.upText', 1, { //alpha:1, alpha: 1, transformOrigin: '50% 50%' }, '-=1') .addPause() .addLabel("blobDown") .to('#display', 1, { attr: { cy: 299.5, r: 0 }, ease: Expo.easeOut }) .to('#dragger', 1, { attr: { //cy:'-=35', r: 13 } }, '-=1') .set('#dragger', { strokeWidth: 0 }, '-=1') .to('.downText', 1, { alpha: 1, ease: Power4.easeOut }, '-=1') .to('.upText', 0.2, { alpha: 0, ease: Power4.easeOut, attr: { y: '+=45' } }, '-=1') Draggable.create(dragger, { type: 'x', cursor: 'pointer', throwProps: true, bounds: { minX: 0, maxX: maxDrag }, onPress: function() { tl.play('blobUp') }, onRelease: function() { tl.play('blobDown') }, onDrag: dragUpdate, onThrowUpdate: dragUpdate }) function dragUpdate() { dragVal = Math.round((this.target._gsTransform.x / maxDrag) * 1000); select('.downText').textContent = select('.upText').textContent = dragVal; var a = document.getElementsByClassName('downText')[0].innerHTML; document.getElementsByClassName('perYear')[0].innerHTML = parseInt(dragVal*18.4); var b = document.getElementsByClassName('downText')[0].innerHTML; document.getElementsByClassName('perTwentyFive')[0].innerHTML = parseInt(a*460); var c = document.getElementsByClassName('downText')[0].innerHTML; document.getElementsByClassName('perMonthCoal')[0].innerHTML = parseInt(a*1); var d = document.getElementsByClassName('downText')[0].innerHTML; document.getElementsByClassName('perMonthSolar')[0].innerHTML = parseInt(a*0.79); TweenMax.to('#display', 1.3, { x: this.target._gsTransform.x }) TweenMax.staggerTo(['.upText', '.downText'], 1, { // x:this.target._gsTransform.x, cycle: { attr: [{ x: this.target._gsTransform.x + 146 }] }, ease: Elastic.easeOut.config(1, 0.4) }, '0.02') } TweenMax.to(dragger, 1, { x: 30, onUpdate: dragUpdate, ease: Power1.easeInOut }) var formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, }); 

 .container { width: 600px; height: 300px; margin-left: 0px; margin-top: 0px; } svg { width: 100%; height:100%; visibility: hidden; } .upText, .downText { text-anchor: middle; font-weight: 300; font-size: 172px; fill: #ffffff; color: black; user-select: none; -webkit-user-select: none; pointer-events: none; text-rendering: optimizeSpeed; margin-left: 10px; margin-top: 0px; line-height: 140px; } .upText { font-size: 22px; font-family: IntCircular-Medium; letter-spacing: -0.5px; } #dragger{ -webkit-tap-highlight-color: rgba(0,0,0,0); } .downText { letter-spacing: -0.4px; font-family: IntCircular-Thin; } 

 <div class="downText" id="downText">100</div> <div class="container"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="100 222 400 250"> <defs> <filter id="goo" color-interpolation-filters="sRGB"> <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur"/> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -7" result="cm"/> </filter> </defs> <g id="dragGroup"> <path id="dragBar" fill="#ff9600" d="M447 299.5c0 1.4-1.1 2.5-2.5 2.5h-296c-1.4 0-2.5-1.1-2.5-2.5l0 0c0-1.4 1.1-2.5 2.5-2.5h296C445.9 297 447 298.1 447 299.5L447 299.5z"/> <g id="displayGroup"> <g id="gooGroup" filter="url(#goo)"> <circle id="display" fill="#ffab18" cx="146" cy="299.5" r="13"/> <circle id="dragger" fill="#ffab18" stroke="#ff6600" stroke-width="0" cx="146" cy="299.5" r="13"/> </g> <text class="upText" x="145" y="266"/> </g> </g> </svg> </div> <div class="perYear" id="perYear"></div> The div id above is "perYear" and its number is formed by taking the contents of the div "downText" and multiplying by 18.4<br><br> <div class="perTwentyFive" id="perTwentyFive"></div> The div id above is "perTwentyFive" and its number is formed by taking the contents of the div "downText" and multiplying by 460<br><br> <div class="perMonthCoal" id="perMonthCoal"></div> The div id above is "perMonthCoal" and its number is formed by taking the contents of the div "downText" and multiplying by 1<br><br> <div class="perMonthSolar" id="perMonthSolar"></div> The div id above is "perMonthSolar" and its number is formed by taking the contents of the div "downText" and multiplying by 0.79 <script src='http://vibralifeusa.com/slider-test/1.js' type='text/javascript'></script> <script src='http://vibralifeusa.com/slider-test/2.js' type='text/javascript'></script>