Price Count up and down click button

Using JavaScript with Hype
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)

2

Lol, I thought you were post a solution…

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))
4 Likes
4

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