I'm using the follow code to make the display appear:

<div id="create_phase{{ forloop.counter }}" class="w3-modal" onclick="this.style.display='visible'">

and the follow code to hidden display:

<a onclick="document.getElementById('create_phase{{ forloop.counter }}').style.visibility = 'hidden'">X</a>

It works fine, but i can't make display appear again after hidden it.

Any suggestions?

CodePudding user response：

Like Laif said in the comments, spaces in your IDs are not a good idea. I think the best solution is to use IDs with proper naming conventions that the DOM plays well with.

But a possible (hacky) solution could be prefacing the spaces in your getElementById call with \ to properly escape them.

Here's a CodePen: https://codepen.io/milofultz/pen/KKvGJbJ

CodePudding user response：

You need to give your IDs proper names (cannot have spaces), as it is now, your div actually has 3 separate IDs.

and you need to change .style.visibility = 'visible', to .style.visibility = 'hidden' as your original code is not modifying the same style.

<div id="ele1" class="w3-modal" onclick="this.style.visibility='hidden'">
  test
</div>
  <a onclick="document.getElementById('ele1').style.visibility = 'visible'">X</a>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Notice, in this snippet I had to reverse the way you were trying to hide and show content in the original, because a hidden element is not clickable, if you want to be able to click it. I would use opacity instead, like this:

<div id="ele1" class="w3-modal" onclick="this.style.opacity=100">
  test
</div>
  <a onclick="document.getElementById('ele1').style.opacity=0">X</a>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>