Develop Reference

Javascript Function that shows and hides Div based on Checkboxes Dynamically

So I'm building a form in HTML that makes use of a lot of checkboxes and hidden Divs. Right now I'm using
function HideDiv1() {
var checkBox = document.getElementById("Check1");
var div = document.getElementById("Div1");
if (checkBox.checked == true) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
<input type="checkbox" id="Check1">CheckBox to show Div1
<div id="Div1" style="display: none;">I should be hidden, assuming the author didn't mess up!</div>
To hide each div based on the appropriate checkbox. But this means that I am copying and rewriting this function every time and the section where I like to keep my functions is getting quite large. I was wondering if there was an easier way to do this such that I would only need one function and I could dynamically show and hide Divs without needing to copy and rewrite this function every time.
(If there is some easy JQuery solution to this: please keep in mind that I have no clue how to use JQuery)
This may be a duplicate, I saw the answer once before in the past but I have no idea how to find it again :(

You can use data attributes to identify which div to show when the checkbox is changed.
You can do this by listening for the change event on each checkbox and toggling the corresponding div with jQuery.toggle:
$('input[type=checkbox]').change(function(){
$('div[data-id='+$(this).data('target')+']').toggle()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" data-target="1">CheckBox to show Div1
<div style="display: none;" data-id="1">Div1</div>
<br/>
<input type="checkbox" data-target="2">CheckBox to show Div2
<div style="display: none;" data-id="2">Div2</div>
Vanilla JS implementation:
document.addEventListener('click', function(e){
if(e.target.matches('input[type=checkbox]')){
let target = document.querySelector('div[data-id="'+e.target.dataset.target+'"]');
target.style.display = target.style.display == "none" ? "block" : "none";
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" data-target="1">CheckBox to show Div1
<div style="display: none;" data-id="1">Div1</div>
<br/>
<input type="checkbox" data-target="2">CheckBox to show Div2
<div style="display: none;" data-id="2">Div2</div>

You would add an onchange attribute to the checkbox to call a single function called hideDiv and pass it two arguments that are the ids of the checkbox and the div that you are hiding with that checkbox:
onchange="hideDiv("check1","div1")"
...then hideDiv uses the arguments passed to it to toggle the correct div:
function hideDiv(checkId, divId) {
const checkbox = document.getElementById(checkId)
const div = document.getElementById(divId);
if (checkBox.checked == true) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
Get in the habit of using let for variables that you need to change and const for variables that will not change value instead of var.

textarea hide buttons onclick

I have a textarea for the user to type something and it has a cancel and a submit button as part of it.
How can I make it so that the cancel and submit button only appears when the user clicks inside the textarea? (using javascript, no jquery please)
I have attempted using this javascript function:
function setButtons(writingtext) {
if (writingtext) {
document.getElementById('cfm').style.display = 'block';
document.getElementById('cancel').style.display = 'block';
}
else {
document.getElementById('cfm').style.display = 'none';
document.getElementById('cancel').style.display = 'none';
}
}
When the user clicks the text area, it would be onClick="setButtons(True)" -> displays the buttons.
I'm not sure if this is the right approach here. Sorry, really new to this.
Any help would be appreciated!

You have control over your html you can do it with just css sniping the next sibling at :focus like this:
div {display:none;}
textarea:focus + div {display:block;}
<textarea name="" id="" cols="30" rows="10"></textarea>
<div>
<input type="submit">
<input type="submit">
</div>

This is only a simple example to show the buttons on focus. If you want to hide them, I think you will be able to manage that solution.
If all you want to do is show the buttons when the text area is focused, use the CSS-only solution. However, I'm guessing you'll want to keep them for a bit or do some extra pre-processing before the submit, in which case you should use the javascript option.
document.querySelector("#textarea").addEventListener("focus", function() {
document.querySelector("#submit").style.display = "block";
document.querySelector("#cancel").style.display = "block";
});
button {
display: none;
}
<textarea id="textarea"></textarea>
<button id="submit">Submit</button>
<button id="cancel">Cancel</button>

You can just assign an id to the textarea for example text and then use
document.getElementById('text').addEventListener('focus', function(){
document.getElementById('cfm').style.display = 'block'
document.getElementById('cancel').style.display = 'block'
})
// Hide when blur (when not focused)
document.getElementById('text').addEventListener('blur', function(){
document.getElementById('cfm').style.display = 'none'
document.getElementById('cancel').style.display = 'none'
})

You should use
onfocus="setButtons(this)" instead of onClick
function setButtons(writingtext) {
document.getElementById('cfm').style.display = 'block';
document.getElementById('cancel').style.display = 'block';
}

How to switch between display:none/block of input field using onclick only once?

I would like to change display property of this input (actually of div which contains it) after onclick ("Click here"). This part goes well ... but after clicking again I want it to be hidden again (has display="none" instead of "block" again and so on) and here I have difficulties.
I've tried classList.toggle but ... I' don't want to change classes, I want to change just one property. I know there is also possibility of creating my input field by using Javascript but I presume I'll come to a deadlock again in the same point.
<form role="form">
<p id="mag">Click here!</p>
<div id="switch" class="xxx"style="display:none;" >
<input id="sr"class="offf" autocomplete="off" placeholder="Search" type="text" >
</div>
</form>
document.getElementById("mag").addEventListener("click", function toffi(){
document.getElementById("switch").style.display="block";
console.log(document.getElementById("switch").style.display);
});
http://codepen.io/zeeebra/pen/RgRYxK

Try this:
document.getElementById("mag").addEventListener("click", function toffi(){
var sw = document.getElementById("switch");
if (sw.style.display === "block") {
sw.style.display = "none";
} else {
sw.style.display = "block";
}
console.log(sw.style.display);
});

Force javascript to run on aspx page load

I have a aspx page with some databound controls. One of them is a checkbox. If this checkbox is checked then it should show a div, else hide it. It works great when I click/unclick the box. BUT, when the page loads initially the div ALWAYS shows up until I check/uncheck the checkbox. How can I fix this so that if the databound checkbox is not checked then when the page loads the div is hidden?
<script type="text/javascript">
function hideDiv(obj) {
if (obj.checked == true) {
document.getElementById("divHome").style.display = 'block';
}
else {
document.getElementById("divHome").style.display = 'none';
}
}
</script>
<asp:CheckBox ID="cbMycb" runat="server" ClientIDMode="Static" onClick="hideDiv(this);"
Checked='<%# Bind("MyField") %>' />
<br />
<div id='divHome'>
STUFF INSIDE THE DIV
</div>

You can either run the hideDiv function when the content is loaded as Amit Joki stated.
window.onload =function(){
hideDiv(document.getElementById('cbMycb'));
But, this solution might present a little issue, you might see the div flickers when the page loads if the div is visible. To solve it just make sure the div is not visible by default by adding some css style...
#divHome{
display: none;
}
Another approach would be using a conditional databinding expression to set the div's visibility...
<div id='divHome' style='<%# "display:" + ((bool)Eval("MyField") ? "block" : "none") %>'>
STUFF INSIDE THE DIV
</div>
Hope it helps

Just call your function once outside.
<script type="text/javascript">
function hideDiv(obj) {
if (obj.checked == true) {
document.getElementById("divHome").style.display = 'block';
}
else {
document.getElementById("divHome").style.display = 'none';
}
}
window.onload =function(){
hideDiv(document.getElementById('cbMycb'));
}
</script>

Text box visible using javascript

I have a hidded textbox and Imagebutton.For avoiding the Postback i am trying to make textbox visible on click of the image button using javascript.But textbox is not showing on click of the image button,Instead image btton is moving.
What could be wrong here in this code.
Appreciate ur help
<asp:TextBox ID="TextBox2" text="From:" style=" visibility: hidden" runat="server" BackColor="#999999" BorderColor="Black" BorderStyle="Double"></asp:TextBox>
<asp:ImageButton ID="ImageButton2" runat="server" BackColor="#99CCFF"
BorderColor="#84C1FF" BorderStyle="Outset" OnClientClick="MJavascriptFunction();return false;" Height="35px"
ImageUrl="search11.png" Width="56px" />
<script type="text/javascript">
function MJavascriptFunction(obj) {
var theControl = document.getElementById("<%=Textbox2.ClientID %>");
theControl.style.display = "block";
}
</script>

Change
theControl.style.display = "block";
To
theControl.style.visibility="visible";
Example
In your Code you set the visiblity option to "hidden", So you need to use the same property in javscript
Alternatively you can change the HTML inline CSS to style="display:none".
Example