We Keep Coding

JavaScript and HTML to show or hide an element

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 it something like this:
<div hidden="evaluateBoolean()">
this will be shown or displayed depending on the JavaScript boolean
</div>

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';
}
});

You have a div with id: myDIV
<div id="myDIV" class="card-header">
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" class="card-header" style="display:none">
Hello World
</div>
And then call the function to show it.

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 class="w" onclick="evaluateBoolean()">
<div> this will be shown or displayed depending on the javascript boolean </div>
</div>

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:
Add to your div an id:
<div id="myDiv"> Toggled div </div>
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;
}

There's a very easy option:-->
having a blank text
firsly 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 sets 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";

You can hide an element in several ways (using jQuery):
const o = $(cssSelectorForElementToStyle);
$(o).hide();
$(o).toggle();
$(o).css('display', 'none');
$(o).addClass('css_class_for_hiding_stuff');
Here using vanilla JavaScript:
const o = document.querySelector(cssSelectorForElementToStyle);
o.style.display = 'none';
o.classList.add('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';
}
});

How to disable a text box and clear value with pure javascript when a checkbox is checked

I am having one checkbox and one input text in a row .I want when a user checks the checkbox to diable the text and clear its value.
I tried this one but nothing:
What is wrong?
HTML:
<span style="width: 200px;font-size: 80%;"><input id="chkSendSummary" type="checkbox" name="ctl03$ctl00$ctl00$chkSendSummary" onclick="checkSendSummaryLetter();"></span>
<input name="ctl03$ctl00$ctl00$txtSendSummary" type="text" id="txtSendSummary" class="NormalTextBox" style="width: 170px;">
var chkSendSummaryLetter=document.getElementById('chkSendSummary');
var txtSendSummaryLetter=document.getElementById('txtSendSummary');
if (chkSendSummaryLetter.checked) {
txtSendSummaryLetter.enabled = true;
} else {
txtSendSummaryLetter.value = "";
txtSendSummaryLetter.enabled = false;
}

You've created a custom property enabled, which has no effect on the DOM. Use disabled instead:
if (chkSendSummaryLetter.checked) {
txtSendSummaryLetter.disabled = false;
} else {
txtSendSummaryLetter.value = "";
txtSendSummaryLetter.disabled = true;
}

<script type="text/javascript">
var chkSendSummaryLetter=document.getElementById('chkSendSummary');
var txtSendSummaryLetter=document.getElementById('txtSendSummary');
if (chkSendSummaryLetter.checked) {
txtSendSummaryLetter.value = "";
hide();
}
if
function hide() {
document.getElementById('txtSendSummary').style.display = 'block';
}
</script>
This post already exists: (found in 2 seconds via google)
javascript hide/show element
you could add a parameter within the function to make it have multiple purposes

Hiding a div with toggle()

I have this button in html
<tr><td>
<button class="btn cmt_list" name="cmtList" id="cmt-'.$row['uid'].'"value = "hide/show"/>Show</button>
</td></tr>
Upon clicking, I'd like to show/hide the div. I would like the div to be hidden by default.
<div class='commentbox' id='comments-{$row['uid']}'></div>
As of now, my javascript looks like this
var toggle = function() {
var mydiv = document.getElementById('newpost');
if (mydiv.style.display === 'block' || mydiv.style.display === '')
mydiv.style.display = 'none';
else
mydiv.style.display = 'block'
}

You don't need to write your own toggle function. You can do it easily with the jQuery toggle function.
Here's the HTML. Setting display: none will make it hidden by default.
<div id="myDiv" style="display: none">
Hello this is my div
</div>
<button id="myBtn">Toggle Div</button>
Here's the jQuery.
$('#myBtn').click(function() {
$('#myDiv').toggle();
});
Working demo: http://jsfiddle.net/eL2AU/
You can also do it with JavaScript alone, like so:
var btn = document.getElementById('myBtn');
btn.onclick = function() {
var d = document.getElementById('myDiv');
if (d.style.display === "none") {
d.style.display = "block";
} else {
d.style.display = "none";
}
};
Demo: http://jsfiddle.net/eL2AU/1/

You are passing the wrong ID to document.getElementById(). Your div has ID comments-{$row['uid']} but you are looking for an element with ID of newpost.

If your issue is hiding the div before it is clicked then put this before your function
$('#myDiv').hide();

How to hide a div if the form state is invalid

Can anyone suggest me how to hide a div if the form state is invalid??
Actually my requirement is like this:-
I need to display some success bar while page loading & then I want to hide this div if the form state is invalid when the user clicks on submit button.I have tried this, which worked previously but somehow our UI is changed. So, when i try to integrate this code with new UI, its not working.
<div class="addUser_success">
</div>
<button class="addUser_button" type="submit" onclick="hideDiv()"></button>
Script Code:-
function hideDiv()
{
if (document.getElementById) {
document.getElementById('addUser_success').style.display = 'none';
}
Also i used Jquery, but doesn't work at all
My Jquery code:-
$(document).ready(function ()
{
$(".addUser_button").click(function ()
{
alert("hai1");
$(".addUser_success").hide();
});
});
Any code snippets please????

I think it's
div.style.display = 'none';
and
div.style.display = 'block';

Try this:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}

javascript/Jquery improvement on a .hide() .show() div menu

i am super new to javascript and jquery self thought ....been working on this menu for a bit and i have finally "finished" but iv got some horrendous code and i am looking for ways to improve my code to make it more readable and functional any tips and hints would be helpful. the idea to save space on the page each div will have different parts of a form that the user will fill out
here is some of the code
<body>
<div class="content">
<div class="menu" id="menu"></div>
<div class="content" id="sort"></div>
<div class="menu"id="menu1"></div>
<div class="content" id="1sort"></div>
<div class="menu"id="menu2"></div>
<div class="content" id="sort2"></div>
</div>
<script>
var show = true;
var show2 = false;
var show3 = false;
$('#1sort').hide("fast");
$('#sort2').hide("fast");
$("#menu").click(function () {
if (show == true) {
$('#sort').hide("fast");
$('#1sort').show("fast");
show = false;
show2 = true;
} else if (show == false) {
$('#sort').show("fast");
$('#1sort').hide("fast");
$('#sort2').hide("fast");
show = true;
show2 = false;
show3 = false;
}
});
$("#menu1").click(function () {
if (show2 == true) {
$('#1sort').hide("fast");
$('#sort2').show("fast");
show2 = false;
show3 = true;
} else if (show2 == false) {
$('#1sort').show("fast");
$('#sort').hide("fast");
$('#sort2').hide("fast");
show = false;
show2 = true;
show3 = false;
}
});
$("#menu2").click(function () {
if (show3 == false) {
$('#1sort').hide("fast");
$('#sort').hide("fast");
$('#sort2').show("fast");
show = false;
show2 = false;
show3 = true;
}
});
</script>

You can use some basic traversal functions, and .is to determine visibility. You don't need boolean variables nor element IDs that way: http://jsfiddle.net/K2sqy/2/.
$(".menu").click(function() {
var $next = $(this).next(".content"); // corresponding .content element
var isVisible = $next.is(":visible"); // is it currently visible?
$(this).siblings(".content").hide("fast"); // hide all siblings
$next[isVisible ? "hide" : "show"]("fast"); // toggle the corresponding .content
if(isVisible) {
// it was visible, so now it's hidden. Show the other .content:
// the next or, if not available, the previous
var $second = $next.nextAll(".content").first();
if($second.length === 0) {
$second = $next.prevAll(".content").first();
}
$second.show("fast");
}
});

A useful technique here is to adorn some extra attributes (preferably html5 data-*) onto the links to indicate what it's associated content is.
<div class="menu" id="menu" data-content="sort"></div>
<div class="content" id="sort"></div>
<div class="menu"id="menu1" data-content="1sort"></div>
<div class="content" id="1sort"></div>
<div class="menu" id="menu2" data-content="sort2"></div>
<div class="content" id="sort2"></div>
You can then use this when an item is clicked to hide the currently visible one, and show the required one:
$('.menu').click(function(){
$('.content:visible').hide('fast');
$('#' + $(this).data('content')).show('fast');
});
Live example: http://jsfiddle.net/hAbPa/

You might also consider using jquery .toggle(). More info here.
$('#foo').toggle(showOrHide);
is equivalent to:
if ( showOrHide == true ) {
$('#foo').show();
} else if ( showOrHide == false ) {
$('#foo').hide();
}

I'm not 100% sure (untested)... but this is pretty close I think.
$(".menu").click(function (){
$(this).next('.content').toggle();
});