Hi I think this is very easy but I just can't seem to twig it at the moment. I want to use a javascript function to set the visibility of an html tag. I realise the below is wrong as hidden doesn't take a boolean. I'm just struggling to click what the easiest way to do it is ?

So I have some script like this

<script>
function evaluateBoolean() {
    if (location.hostname.indexOf("someval" > 0) {
        return true;
    } else {
      return false;
    }
</script>

and I wanted to use iut something like this

<div hidden="evaluateBoolean()"> this will be shown or displayed depending on the javascript boolean </div>

CodePudding user response：

I would recommend doing it by altering the display style in the JavaScript code.

const el = document.getElementById('container');
    const btn = document.getElementById('btn');

    btn.addEventListener('click', function handleClick() {
    if (el.style.display === 'none') {
        el.style.display = 'block';

        btn.textContent = 'Hide element';
    } else {
        el.style.display = 'none';

        btn.textContent = 'Show element';
    }
    });

CodePudding user response：

You have a div with id: myDIV

<div id="myDIV" >
    Hello World
</div>

You then call this Javascript function to show the element:

function showDiv() {
document.getElementById('myDIV').style.display = "block";
}

and this one to hide it:

function hideDiv() {
document.getElementById('myDIV').style.display = "none";
}

Note, that you can hide a div by:

<div id="myDIV"  style="display:none">
    Hello World
</div>

And then call the function to show it.

CodePudding user response：

You trigger must be outside of the element which you hide. because if hided you cant even clicked. The js function classList toggle would be good.

function evaluateBoolean() {
  const d = document.querySelector('.w div');
  d.classList.toggle('hide');
}

.w {
  height: 40px;
  background: yellow;
}
.hide {
  display: none;
}

<div  onclick="evaluateBoolean()">
  <div> this will be shown or displayed depending on the javascript boolean </div>
</div>

CodePudding user response：

You can't explicitly run js in your html, if you aren't using any framework like angular or react, where property binding is allowed.
For achieving your intentions with js you can use this approch:

1. Add to your div an id:

    <div id="myDiv"> Toggled div </div>
   

2. In your js script modify your function evaluateBoleean() to show/hide the element:

   function evaluateBoolean() {
   
   const div = document.querySelector("#myDiv");
   
   if (location.hostname.indexOf("someval" > 0) {
   
       div.hidden = true;
   
   } else {
   
       div.hidden = false;
   }
   

CodePudding user response：

Listen Bro there's a very easy option:--> having a blank text firsty replace the html code with this:-->

<div hidden="evaluateBoolean()" id="ThingToBeHidden"> this will be shown or displayed depending on the javascript boolean </div>

and put js code:-->

document.getElementById("ThingToBeHidden").innerHTML = "";

So you have assigned the div to have it's special id which none other element has. So now the js code selects the div with that id and then settes the context of it to blank. If you want the text to appear again, the js code is:-->

document.getElementById("ThingToBeHidden").innerHTML = "this will be shown or displayed depending on the javascript boolean";

if you need any help comment on this answer saying i need help.

CodePudding user response：

You can hide an element in several ways (using JQuery):

$(o).hide();
$(o).toggle();
$(o).css('display', 'none');
$(o).addClass('css_class_for_hiding_stuff');

But your question doesn't point out exactly when you are going to make this check. So let's assume you are going to check the boolean value once when the page is loaded and hide or show a given element according to that value:

$(document).ready(
    () => {
      if(evaluateBoolean() === true){        
         //do nothing in this case
      }else{
         $('#elementWithThisId').css('display', 'none');
      }
    }
);

Without JQuery:

document.addEventListener("DOMContentLoaded", function() {

  if(evaluateBoolean() === true){        
    //do nothing in this case
  }else{
    document.querySelector('#elementWithThisId').style.display = 'none';
  }
   
});