I don't want "tblWeight" and "breakTag" to be displayed when page is first opened

I have a function which works correctly but it has one problem. I have 2 radio buttons and if user clicks the radio button [1] then it will show the “tblWeight” and “breakTag” else do not display them. That is not the problem, the problem is thatwhen the user opens up the browser for the first time, I want the “tblWeight” and “breakTag” to not be displayed which should happen because of the “else” statement but it doesn’t do it when the page is opened for the first time and thus it shows the “tblWeight” and “breakTag”.

Why is it display the “tblWeight” and “breakTag” when the page is first open? I did try turning my if statement around so that if … then display none to “tblWeight” and “breakTag” else display it as block but this did not work.

Below is my code:

	function getWeight() {
			var weightChoice = document.getElementsByName("weightChoice");               
            var textWeight = document.getElementById("txtWeight");
            var tblWeight = document.getElementById("tblWeight");
            var breakTag = document.getElementsByClassName("breakTag");
            if(weightChoice[0].checked == true){
	            tblWeight.style.display = "block";
	            breakTag.style.display = "block";
	            textWeight.value = 0;
	            showData = false;
	            tblWeight.style.display = "none";
	            breakTag.style.display = "none";
	            textWeight.value = 0;



Thank You

Are you calling getWeight() either as a window.onload event handler or just above the closing </body> tag?

If not, that is probably the cause of your problem.

Where are you actually calling getWeight() ?

Also, it’s generally not a good idea to have variable names the same as id values.

Also, also, :slight_smile: you can hide the 2 elements by default in the css so that they do not appear on page load.

OMG can’t believe I didn’t think of setting display:none in css first. Thank You :slight_smile: