Conditional onclick event only functioning in one direction

[TechnoDiver]

Could someone give me a quick clue as to why the following, very simple, JS isn't working properly, please?

<script>
  function toggleResponseArea() {
      if (document.getElementById("commentResponse").style.display = 'none') {
          document.getElementById("commentResponse").style.display = 'block';
      } else if (document.getElementById("commentResponse").style.display = 'block') {
          document.getElementById("commentResponse").style.display = 'none';
      }
      return false;
  }
</script>

The text area is initially set to display: none; in the stylesheet. I've used an onclick attribute for the 'reply' element in the HTML.

And to be clear, when the page is loaded (display: none;)  and the reply 'button' is clicked it does change the textarea to display: block; that's not the problem. The issue is when it's clicked again it doesn't change it back from display: block; to display: none;

Thanks for the help.

[requinix]

=

[TechnoDiver]

59 minutes ago, requinix said:

=

Ha! That was indeed a very quick clue. Thank you.

but strangely it only works with == in the if statement, not the if else. which seems to me like it should need the == in both of them

This works ->

if (document.getElementById("commentResponse").style.display == 'none') {
    document.getElementById("commentResponse").style.display = 'block';
} else if (document.getElementById("commentResponse").style.display = 'block') {
    document.getElementById("commentResponse").style.display = 'none';
}
return false;

This doesn't ->

if (document.getElementById("commentResponse").style.display == 'none') {
    document.getElementById("commentResponse").style.display = 'block';
} else if (document.getElementById("commentResponse").style.display == 'block') {
    document.getElementById("commentResponse").style.display = 'none';
}
return false;

The second one with the 2 == doesn't even display the textarea. Why is that? Seems like the double = should be required in both the if and ifelse

[Barand]

You might have more success with

        function toggleResponseArea() {
            
              if (document.getElementById("commentResponse").style.display == 'block') {
                  document.getElementById("commentResponse").style.display = 'none';
              }
              else {
                  document.getElementById("commentResponse").style.display = 'block';
              }
          }

Or, easier still

            $("#reply").click( function() {
                $("#commentResponse").toggle()
            })

 

[requinix]

40 minutes ago, TechnoDiver said:

The second one with the 2 == doesn't even display the textarea. Why is that? Seems like the double = should be required in both the if and ifelse

You're really making it sound like you don't actually understand the difference between = and ==.

style.display will return the actual value set with CSS. It will not return the effective value if the value isn't set.

[TechnoDiver]

8 minutes ago, requinix said:

You're really making it sound like you don't actually understand the difference between = and ==

Of course I understand the difference between them. In the code block where I used == in both the if and elseif statements we're making a comparison. In the assignment blocks we're not making a comparison but assigning a new value to the display attribute. There's 2 comparison statements and 2 assignment statements, I simply asked why == was only needed in one of those comparison statements.

What I don't understand is your use of actual value and effective value, nor why you think this is such a stupid question.

[requinix]

52 minutes ago, TechnoDiver said:

Of course I understand the difference between them. In the code block where I used == in both the if and elseif statements we're making a comparison. In the assignment blocks we're not making a comparison but assigning a new value to the display attribute. There's 2 comparison statements and 2 assignment statements, I simply asked why == was only needed in one of those comparison statements.

It's needed in both. Your code worked for the exact same reason that it did not work before.

 

52 minutes ago, TechnoDiver said:

What I don't understand is your use of actual value and effective value,

If you have a <div> then the style.display is nothing because there is no actual value set, even though the effective value is "block".

 

52 minutes ago, TechnoDiver said:

nor why you think this is such a stupid question.

Why I think what is a stupid question?

[gizmola]

Here is the crux of your issue (aside from the = vs == issues).  

The style value from document.getElementById is unavailable until you actually use it.  So in your case, your code didn't run with the if-else, because no property was ever matched.  You can see the state of the styles are not initialized by adding a console.log(document.getElementById("commentResponse"))

Here is a way to workaround that if you want to use it.  This assumes that the style of the element is display: none as you described.  Another alternative would be to set the value initially to 'none' with javascript.

function toggleResponseArea() {
	let responseAreaState = document.getElementById("commentResponse").style.display;
  console.log(responseAreaState)
  if (responseAreaState == "none" || responseAreaState == "") {
  		console.log("none")
      document.getElementById("commentResponse").style.display = 'block'
  } else if (responseAreaState == "block") {
  		console.log("block")
      document.getElementById("commentResponse").style.display = 'none'
  }
  return false
}

There is an alternative javascript function: window.getComputedStyle, that you could use to get an accurate value whereas, currently you get an empty value ("") 

[gizmola]

I decided to go ahead and do a test, and this is the alternative version with getComputedStyle.

 

function toggleResponseArea() {
  let el = document.getElementById("commentResponse")
  let responseAreaState = window.getComputedStyle(el).display;
  console.log(responseAreaState)
  if (responseAreaState == "none") {
      console.log("none")
      document.getElementById("commentResponse").style.display = 'block'
  } else if (responseAreaState == "block") {
      console.log("block")
      document.getElementById("commentResponse").style.display = 'none'
  }
  return false
}

 

[kicken]

Alternatively, as I mentioned in another thread of yours, stop trying to manipulate the styles directly like that and just apply/remove a class.

js:

function toggleResponseArea(){
    document.getElementById('comment-area').classList.toggle('removed');
}

css:

.removed {
  display: none;
}