Price Count up and down click button


(Pete) #1

I was looking for a javascript solution that would allow based on a click of a button increase and decrease price count by way of animating numbers. As well as removal of the added up sell option with an ability go to specific timeline with the total price link or graphic out of three?

increase decrease.zip (18.9 KB)


(Mark Hunte) #2

Lol, I thought you were post a solution…


(Mark Hunte) #3

A very quick solution done on thefly , so probably not as elegant as I would like but should give you an idea

increase decrease_MHv1.hype.zip (31.9 KB)

var theTotal =  hypeDocument.getElementById('total')
	
	var elOpacity = hypeDocument.getElementProperty(element, 'opacity')
	 var  elAdded =  element.parentElement.parentElement.querySelector('.added') 
	 var  elUpsold = element.parentElement.parentElement.querySelector('.upsold')
	 var  elPrice = Number(element.innerText.replace('$','') ) 
	
	 
	 var totalPrice =  Number(theTotal.innerText.replace('$',''))   
	 
	if (elOpacity === 1){
	 hypeDocument.setElementProperty(elAdded, 'opacity', 0.5, 1 , 'easeinout')
	hypeDocument.setElementProperty(elUpsold, 'opacity', 0.5, 1 , 'easeinout')
	hypeDocument.setElementProperty(element, 'opacity', 0.5, 1 , 'easeinout')
	var nprice = ( Number(totalPrice)  +  Number(elPrice ))
	theTotal.innerHTML = '$'+  ( nprice.toFixed(2))
	
	
	
	} else {
	
	 hypeDocument.setElementProperty(elAdded, 'opacity', 0.0, 1 , 'easeinout')
	hypeDocument.setElementProperty(elUpsold, 'opacity', 1, 1 , 'easeinout')
	hypeDocument.setElementProperty(element, 'opacity', 1, 1 , 'easeinout')
	var nprice = ( Number(totalPrice)  -  Number(elPrice ))
	theTotal.innerHTML = '$'+  ( nprice.toFixed(2))

(Jonathan Deutsch) #4

There’s a few jquery plugins out there that can also do the count up/down.