How do I show a button and hide a button

How do I show a button and hide a button
0

#1

For my weather project I’m trying to make the celsius symbol become a button, but only show when a user presses “Click for weather.” Currently when I make the celsius symbol a button, the button shows before I click the “click for weather button.” How do I fix this? Thanks.

Link - https://codepen.io/colinsteidtmann/full/YYEGpO/


#2

I am not seeing where you are making the celsius symbol a button in your code. Can you paste the code you believe is “making the celsius symbol a button”?

Also, this is just some advice, but to make your code more readable, try to use variable names and element ids which describe the value they contain. For example, instead of id=“y”, how about id=“city”. Instead of id=“x”, use id=“temperature”. For id=“z”, maybe use id=“weatherIcon”?

If you really want to create a celsius “button”, then you would need to create an html element with applicable id which would have an onclick event also, that would trigger another function. The problem with doing so, is both click events would trigger, even if you were to click just the dynamically created element, so you would need to unbind the button class=“circle” after the first click.

So to do this, you could change the following:

x.innerHTML = data.main.temp+celsius;

by adding a span element (to keep it on the same line as the temperature) containing the value of the celsius variable.

x.innerHTML = data.main.temp + ' <span id="celsiusBtn" onclick="doSomething()">'+ celsius + '</span>';

and then within the getJSON callback function, you would need to add the following to remove the onclick property you hard coded into the html.

$('.circle').prop('onclick',null).off('click');

Of course, based on my example code above, you would need to create a function called doSomething which would convert the temperature and display it along with the Fahrenheit symbol.