Develop Reference

Div to toggle it's display on/off but be able to click the input

I'm trying to make it so that whenever you click on either the button OR div itself, the display toggles. But whenever I click on the input inside of the div, the div disappears.
How can this be made so that you can still click on the input and the div not disappear? I've tried setting a z-index to the input but this fails.
Appreciate any help, thank you.
function doThis() {
var el = document.querySelector('div');
if (el.style.display === 'flex') {
el.style.display = 'none';
} else {
el.style.display = 'flex';
}
}
div {
background: lightgreen;
display: flex;
}
<button onclick='doThis()'>click me</button>
<div onclick='doThis()'>
text <input type="text">
</div>

If you want the input click not to trigger the div click, you can use event.stopPropagation() function. It prevents event bubbling (passing the event to higher level DOM-elements).
function doThis() {
var el = document.querySelector('div');
if (el.style.display === 'flex') {
el.style.display = 'none';
} else {
el.style.display = 'flex';
}
}
div {
background: lightgreen;
display: flex;
}
<button onclick='doThis()'>click me</button>
<div onclick='doThis()'>
text <input onclick='event.stopPropagation()' type="text">
</div>

For a pure JavaScript solution (that doesn't need jQuery), see this answer from #Sabaz to How do I prevent a parent's onclick event from firing when a child anchor is clicked?:
document.getElementById("clickable").addEventListener("click", function( e ){
e = window.event || e;
if(this === e.target) {
// put your code here
}
});
Your code wont be executed if clicked on parent's childs

you can do this:
function doThis(evt) { // <-- new: add argument
evt.preventPropagation() // <-- new, works in all new browsers
var el = document.querySelector('div');
if (el.style.display === 'flex') {
el.style.display = 'none';
} else {
el.style.display = 'flex';
}
}
And add to your html:
onclick='doThis(event)'

Why cant you implement event stopPropagation for all input objects, Try ..
// select elements with js selectors and bind it
document.querySelector('input').onclick = function(e){
e.stopPropagation()
};
and here is answer by Rex M

Just check the target element which is clicked
function doThis() {
if(event.target.nodeName != "INPUT"){
var el = document.querySelector('div');
if (el.style.display === 'flex') {
el.style.display = 'none';
} else {
el.style.display = 'flex';
}
}
}

button tag alway disabled in index.html

I am working on a Phonegap Build app for Android. I created two buttons with onclick which triggers a doHelper function that will disable the buttons after. But for some reason the buttons are always disabled even before clicking on the buttons.
Here is my code.
html:
<div class="gameHelper">
<div class="row">
<div class="twelve columns">
<button onclick="doHelper('skip')" class="skipAnswer button helperButtons">
Skip
</button>
<button onclick="doHelper('remove')" class="removeOneAnswer button helperButtons">
Remove 1
</button>
</div>
</div>
js:
function doHelper(helperName) {
if (helperName == 'skip') {
var classVar = '.skipAnswer';
skipAnswerUsed = true;
$(classVar).attr('disabled', 'disabled');
$(classVar).css('background-color', 'red');
submitAnswer(activeNumber);
} else if (helperName == 'remove') {
var classVar = '.removeOneAnswer';
removeOneAnswerUsed = true;
$(classVar).attr('disabled', 'disabled');
$(classVar).css('background-color', 'red');
}
}
css:
.helperButtons {
width: 49%;
background-color: green;
color: white;
}

I'd recommend seperating the HTML from your JS.
This can be done with event handlers. Since you are already using jQuery, here is one possible way to do that:
$('button.skipAnswer').on('click', function () {
doHelper("skip");
});
$('button.removeOneAnswer').on('click', function () {
doHelper("remove");
});
https://jsfiddle.net/9jczt3uu/

Are you using firefox? Probably that is the problem, I had the same issue some time ago...
You can fix it by adding
$(document).ready(function(){
$(".button").removeAttr('disabled');
});

Your HTML and Javascript is correct. There is probably another issue.

try to this way
function doHelper(helperName) {
$('button').removeAttr('disabled')
$('button').css('background-color', '');
if (helperName == 'skip') {
var classVar = '.skipAnswer';
skipAnswerUsed = true;
$(classVar).attr('disabled', '');
$(classVar).attr('disabled', 'disabled');
$(classVar).css('background-color', 'red');
submitAnswer(activeNumber);
} else if (helperName == 'remove') {
var classVar = '.removeOneAnswer';
$(classVar).attr('disabled', '');
removeOneAnswerUsed = true;
$(classVar).attr('disabled', 'disabled');
$(classVar).css('background-color', 'red');
}
}

JavaScript: How can I change the visibility of an element when clicked?

I'm trying to make a code that allows me to make click on any part of the screen and when I click the screen should display the message "click!"
By far I got the next code
html:
<html>
<head>
<title>Sense events anywhere</title>
<script type="text/javascript" src="anywhere.js"></script>
<link type="text/css" rel="stylesheet" href="anywhere.css" />
</head>
<body id="body" onload="init();">
<div id="message"> Click! </div>
</body></html>
JavaScript:
var e;
function init(){
e = document.getElementById("message");
document.getElementById("message").style.visibility = "hidden";
e.onmousedown = displayIt(e);
e.onmouseup = hideIt;
}
function displayIt(e) {
e.style.visibility = "visible";
}
function hideIt() {
e.style.visibility = "hidden";
}
CSS:
body {
}
div#message{
}
By far I only tried to turn the message visible and "invisible" when clicked but it doesn't work
Sorry for my English, I'm not a native speaker. If anyone could help me, that will be great.
Thanks.

var visible = true,
body = document.getElementById("body"),
mess = document.getElementById("message");
body.onclick = function() {
if (visible === true) {
mess.style.visibility = "hidden";
visible = false;
} else {
mess.style.visibility = "visible";
visible = true;
}
}
Edit Replaced body in selector as i didnt notice you wanted any part of the screen clicked

I'd suggest:
function toggleMessage(targetID){
var target = document.getElementById(targetID),
display = target.style.display;
target.style.display = display && display == 'block' ? 'none' : 'block';
}
document.body.addEventListener('click', function(){
toggleMessage('message');
});
Simple JS Fiddle demo.
Amended the above to use visibility (rather than display):
function toggleMessage(targetID){
var target = document.getElementById(targetID),
visibility = target.style.visibility;
target.style.visibility = visibility && visibility == 'visible' ? 'hidden' : 'visible';
}
document.body.addEventListener('click', function(){
toggleMessage('message');
});
Simple JS Fiddle demo.
References:
EventTarget.addEventListener().

Solution with jQuery (I recommend you to use display property. Because, if you use visibility, element will keep its space even it is hidden. With display: none; element is "removed".):
HTML
<div id="message"> Click! </div>
CSS
#message {
display: none;
}
jQuery
$(document).ready(function(){
$(window).click(function(){
$('#message').toggle();
});
});
DEMO: http://jsfiddle.net/j3KVT/2/
If you want to use visibility property then this is (one of many) solution with jQuery:
HTML
<div id="message">Click!</div>
jQuery
$(document).ready(function () {
$('#message').css('visibility', 'hidden');
$(window).click(function () {
if ($('#message').css('visibility') == 'hidden')
$('#message').css('visibility', 'visible');
else $('#message').css('visibility', 'hidden');
});
});
DEMO: http://jsfiddle.net/j3KVT/3/

form elements fade out with jQuery on selected option

I have this JavaScript code to fade out elements when a certain option is selected in the form, here is my code:
<script type="text/javascript">
function opt_onchange() {
if (document.getElementById("opt").value == "banscan") {
document.getElementById("form_username").style.visibility = "hidden";
document.getElementById("form_password").style.visibility = "hidden";
} else {
document.getElementById("form_username").style.visibility = "visible";
document.getElementById("form_password").style.visibility = "visible";
}
if (document.getElementById("opt").value == "") {
document.getElementById("submit").style.visibility = "hidden";
} else {
document.getElementById("submit").style.visibility = "visible";
}
}
</script>
When the option banscan is selected, the top 2 fields username and password fade out. But in Javascript they fade out instantly.
As I'm using bootstrap 3 on the website I thought I should try out jQuery as it is already available. I've read through some jQuery tutorials but I can't find anything specific to what I need. Here is my attempt:
<script type="text/javascript">
function opt_onchange() {
if (document.getElementById("opt").value == "") {
document.getElementById("submit").style.visibility = "hidden";
} else {
document.getElementById("submit").style.visibility = "visible";
}
if (document.getElementById("opt").value == "banscan") {
$("form_username").fadeOut();
$("form_password").fadeOut();
} else {
$("form_username").fadeIn();
$("form_password").fadeIn();
}
}
</script>
However, this code doesn't work at all.
Edit:
Here is my updated code, now I just need to make the submit button fade out on page load.
<script type="text/javascript">
$(document).ready(function() {
$("#submit").fadeOut();
});
function opt_onchange() {
if (document.getElementById("opt").value == "") {
$("#submit").fadeOut();
} else {
$("#submit").fadeIn();
}
if (document.getElementById("opt").value == "banscan") {
$("#form_username").fadeOut();
$("#form_password").fadeOut();
} else {
$("#form_username").fadeIn();
$("#form_password").fadeIn();
}
}
</script>

As #user3237539 pointed out, your jQuery selectors must begin with '#'. Your code should look like this:
<script type="text/javascript">
function opt_onchange() {
if (document.getElementById("opt").value == "") {
document.getElementById("submit").style.visibility = "hidden";
} else {
document.getElementById("submit").style.visibility = "visible";
}
if (document.getElementById("opt").value == "banscan") {
$("#form_username").fadeOut();
$("#form_password").fadeOut();
} else {
$("#form_username").fadeIn();
$("#form_password").fadeIn();
}
}
</script>
Hope that helps!
PS: Whenever you use document.getElementById() you could instead use $("#id") to be able to use more of jQuery's helpful functions. You could replace document.getElementById("submit").style.visibility = "hidden";
with $("#submit).hide();

I am trying to make a simple toggle button in javascript

I am trying to make a simple toggle button in javascript. However, the button will only turn "OFF" and will not turn back "ON"
<html><head></head>
<script type="text/javascript">
function toggle(button)
{
if(document.getElementById("1").value=="OFF"){
document.getElementById("1").value="ON";}
if(document.getElementById("1").value=="ON"){
document.getElementById("1").value="OFF";}
}
</script>
<body>
<form action="">
<input type="button" id="1" value="ON" style="color:blue"
onclick="toggle(this);">
</form></body></html>
I am running:HP Netbook : Ubuntu Linux 10.04 : Firefox for Ubuntu 1.0.

Why are you passing the button if you're going to look it up?
Also, since you know the possible values, you only need to check if it's OFF, otherwise, you know it's ON.
// Toggles the passed button from OFF to ON and vice-versa.
function toggle(button) {
if (button.value == "OFF") {
button.value = "ON";
} else {
button.value = "OFF";
}
}
If you wanna get fancy and save a couple of bytes you can use the ternary operator:
function toggle(b){b.value=(b.value=="ON")?"OFF":"ON";}

Both of your if statements are getting executed one after each other, as you change the value and then immediately read it again and change it back:
function toggle(button)
{
if(document.getElementById("1").value=="OFF"){
document.getElementById("1").value="ON";}
else if(document.getElementById("1").value=="ON"){
document.getElementById("1").value="OFF";}
}
Adding the else in there should stop this happening.

Another method to do this is:
var button = document.querySelector("button");
var body = document.querySelector("body");
var isOrange = true;
button.addEventListener("click", function() {
if(isOrange) {
body.style.background = "orange";
}else {
body.style.background = "none";
}
isOrange = !isOrange;
});
In the JavaScript file.
/*****
NOTE!
Another way is applying a class to the element that we want to change.
The CSS file must have the class with the format we want:
.orange {
background: orange;
}
By last in our js file we only need to make the application of the class:
var button = document.querySelector("button");
button.addEventListener("click", function() {
document.body.classList.toggle("orange");
});
Regards :)

Why not use a switch?
function toggle(button)
{
switch(button.value)
{
case "ON":
button.value = "OFF";
break;
case "OFF":
button.value = "ON";
break;
}
}

<html>
<head>
<script type="text/javascript">
function toggle(button)
{
if(document.getElementById("1").value=="OFF")
{
document.getElementById("1").value="ON";
}
else
{
document.getElementById("1").value="OFF";
}
}
</script>
</head>
<body>
<form action="">
<input type="button" id="1" value="ON" style="color:blue" onclick="toggle(this);">
</form>
</body>
</html>

This will resolve your issue.
let isOn = true;
function toggle(button) {
isOn = !isOn;
if (isOn) {
document.getElementById("1").value = "ON";
} else {
document.getElementById("1").value = "OFF";
}
}