Menu
How do you add and remove 'hidden' from <p hidden>My Text</p>?
I tried removing the attribute and setting it to false but neither of them worked.
let p = document.getElementsByTagName('p');
let myText;
for (i = 0; i < p.length; i++) {
if (p[i].innerHTML == "My Text") {
myText = p[i];
break;
}
}
myText.removeAttribute("hidden"); // no effect
myText.setAttribute("hidden", false); // no effect
544
document. getElementById("button"). hidden = "false"; As hidden is not a css visibility : hidden; property.
Style display property is used to hide and show the content of HTML DOM by accessing the DOM element using JavaScript/jQuery. To hide an element, set the style display property to “none”. document. getElementById("element").
<input type="hidden"> <input> elements of type hidden let web developers include data that cannot be seen or modified by users when a form is submitted.
Use display:none to hide an element, it will not be available in the page and does not occupy any space. Use visibility:hidden to hide an element, it will still take up the same space as before when visible.
Could you set an ID on the <p> tag and interact with it that way?
<p id="whatever" hidden>My Text</p>
And:
let p = document.getElementById('whatever');
p.removeAttribute("hidden");
It looks fine here. Try with this code if you wish.
index.html
<html>
<head>
</head>
<body>
<p hidden>My Text</p>
</body>
</html>
script
let p = document.getElementsByTagName('p');
let myText;
for (i = 0; i < p.length; i++) {
if (p[i].innerHTML == "My Text") {
// console.log(myText, p[0].innerHTML);
myText = p[i];
break;
}
}
myText.removeAttribute("hidden");
You can see in codePen https://codepen.io/anon/pen/qozVaq
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
