Why is the styling set by javascript not working with Ractive.js?

In this fiddle, on click of the button the following lines are also getting executed along with other ones:

document.getElementById("WeatherData").style.visibility = "block";
weatherDataDiv.style.visibility='block';

With no effect.

I have searched a lot but seems like the syntax is correct.

How to un-hide the div in RactiveJs.

Other frameworks like jQuery and Angular cannot be used for some business reasons.

Solution

Just change:

weatherDataDiv.style.visibility='block';

weatherDataDiv.style.visibility='visible';

The value block is not a valid value for the visibility property. The valid values are: visible|hidden|collapse|initial|inherit;