Jump to content

Conditional onclick event only functioning in one direction


TechnoDiver
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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()
            })

 

  • Thanks 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 ("") 

Link to comment
Share on other sites

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
}

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.