When I click on the div, it should open. When I click again, it should close the div. Please help me on this.
<html>
<head>
<script type="text/javascript">
var bool = 0;
function showDiv(){
if(bool==1){
bool=0;
document.getElementById(show).style.visibility = "hidden";
}else if(bool==0){
bool=1;
document.getElementById(show).style.visibility = "visible";
}
}
</script>
</head>
<body>
<input type="button" value="click" onclick="showDiv();" />
<div="show">
<p>it is okay it is okay it is okay it is okay it is okay it is okay it is okay it is okay</p>
</div>
</body>
</html>
You're missing the quotes for the id argument for getElementById()
document.getElementById('show').style.visibility = "hidden";
Also the id attribute name is missing on the <div>
<div="show">
Should be this:
<div id="show">
jsFiddle
Try this:
HTML
<button id="myButton">Show DIV</button>
<div id="show" class="hidden">
<p>it is okay </p>
</div>
CSS
.hidden
{
display:none;
}
JS
$('#myButton').click(function () {
$("#show").slideToggle();
$(this).text($(this).text() == 'Show DIV' ? 'Hide DIV' : 'Show DIV');
return false;
});
Here's the jsfiddle: http://jsfiddle.net/mgrcic/RbjLJ/
When you are referring to
document.getElementById(show).style.visibility
The show refers to a variable, but you are trying to get it as a string, so you should get it quoted
document.getElementById('show').style.visibility
You are writing the div wrong. You should put "show" as the value of your Id attribute:
<div id="show"> </div>
If you use jQuery (you tagged it), why not use jQuery to get things done more cleanly, in an unobtrusive way ?
$(function(){
var bool = 0;
$("input[type='button']").click(function(){
if(bool ==0)
{
bool =1
$("#show").hide();
}
else
{
bool =0
$("#show").show();
}
});
});
Here is the sample: http://jsfiddle.net/sHsuh/10/
Note that this script will bind the function to all button elements in your page. So I would be more specific by adding an Id to my Button and bind with that:
$("#myButtonId").click(function(){
//code goes here
});
Here is the solution, you couldn't get your element without specifying div id="theid":
<html>
<head>
<script type="text/javascript">
var bool = 0;
function showDiv(){
var elem = document.getElementById('show');
console.log(elem);
if(bool==1){
bool=0;
elem.style.visibility = "hidden";
}else if(bool==0){
bool=1;
elem.style.visibility = "visible";
}
}
</script>
</head>
<body>
<input type="button" value="click" onclick="showDiv();" />
<div id="show">
<p>it is okay it is okay it is okay it is okay it is okay it is okay it is okay it is okay</p>
</div>
</body>
</html>
You have made some mistakes:
<div="show"> is wrong. The correct way is <div id="show">.
If you want show and hide means, first set your div's CSS to visibility:hidden;.
You are missing an apostrophe in document.getElementById('show');.
Try this:
<html>
<head>
<script type="text/javascript">
var bool = 0;
function showDiv(){
if(bool==1){
bool=0;
document.getElementById('show').style.visibility = "hidden";
}else if(bool==0){
bool=1;
document.getElementById('show').style.visibility = "visible";
}
}
</script>
</head>
<body>
<input type="button" value="click" onclick="showDiv();" />
<div id="show" style=" visibility:hidden;">
<p>it is okay it is okay it is okay it is okay it is okay it is okay it is okay it is okay</p>
</div>
</body>
</html>
Related
I've got some simplified code of mine where I can't figure out why it won't work
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<div>
<button class="submit1">update</button>
</div>
<br>
<div>
<button class="submit2">submit</button>
</div>
<br>
<div class="result"></div>
<script>
var myvar = 1;
$(".submit1").on('click',function(){
myvar = 2;
});
if(myvar == 2){
$(".submit2").on('click',function(e){
$('.result').html("it works!");
});
};
</script>
</html>
The fact that myvar isn't 2 originally seems to essentially ignore the last part of the javascript but I don't understand why since I've never come across this kind of problem before. Any help would be appreciated!
edit(from comment): That is almost what I want, sorry I didn't specify. I have some objects that are hidden and shown and I have some more intensive code that runs when a submit button is clicked or enter is pressed on each of the hidden and shown objects. But my problem is that all of the code runs when I press enter and I tried to made an if statement to clarify which object was being shown and then only run the code if it is being shown
I can only guess, but I believe you meant to do this?
var myvar = 1;
$(".submit1").on('click', function() {
myvar = 2;
});
$(".submit2").on('click', function(e) {
$('.result').html(myvar == 2 ? "it works!":"Click update first");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div>
<button class="submit1">update</button>
</div>
<br>
<div>
<button class="submit2">submit</button>
</div>
<br>
<div class="result"></div>
Or maybe:
$(".submit1").on('click', function() {
$(".submit2").show();
});
$(".submit2").on('click', function(e) {
$('.result').html("it works!");
});
.submit2 { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div>
<button class="submit1">update</button>
</div>
<br>
<div>
<button class="submit2">submit</button>
</div>
<br>
<div class="result"></div>
A better appraoch with the existing code will be
var myvar = 1;
$(".submit1").on('click',function(){
myvar = 2;
});
$(".submit2").on('click',function(e){
if(myvar == 2){
$('.result').html("it works!");
}
});
Right and simple answer is:
var myvar = 1;
$(".submit1").on('click',function(){
myvar = 2;
});
$(".submit2").on('click',function(e){
if(myvar == 2){
$('.result').html("it works!");
});
};
I'm trying to make a div appear and disappear using javascript, but it's not working.I've included the javascript file(where the function is),but I don't understand why it's not working.
When I press the button, nothing happens.
HTML code:
<script type="text/javascript" src="show_on_click.js"></script>
<div id="myDiv" style="display:none" class="answer_list">Button Test</div>
<input type="button" name="answer" onclick="ShowDiv()" value="Test"/>
JavaScript code:
function ShowDiv(){
document.getElementById("myDiv").style.display = 'block';
}
Try this:
<div id="myDiv" style="display:none" class="answer_list">Button Test</div>
<input type="button" name="answer" onclick="ShowDiv()" value="Test"/>
<script>
function ShowDiv(){
document.getElementById("myDiv").style.display = 'block';
}
</script>
There are one or both of two errors:
your src path for script is wrong
somewhere you redefine function for button
Another problem will be: you are only set display to block, not to none again.
Try this:
function ShowDiv() {
var element = document.getElementById("myDiv");
if (element.style.display === 'none') {
element.style.display = 'block';
} else {
element.style.display = 'none';
}
}
I want to configure a hyperlink to close/open its related div in asp.net. Basically, when a user clicks the sign X, the panel should be closed and the sign + should be appeared. When + is clicked, the panel should be showed again. I could not manage this and I believe my main problem is "document.getElementById('<%= lb_closePanel.ClientID %>').value" is coming as undefined. Here is the code until now. I appreciate for your helps!
<!DOCTYPE html>
....
<div class="appheader">
<h1 class="appheaderContent">Search for Client</h1>
<div id="checkBox"></div>
<div id="closePanel"><h2 id="lblClosePanel">Close Panel</h2>
<div id="xButton">
<asp:LinkButton onclientclick="CloseOpenPanel('Search')" runat="server" Text="X" style="text-decoration:none; color:white" ID="lb_closePanel"></asp:LinkButton>
</div>
</div>
</div>
<div class="app" id="Search">
...
<div>
...
</html>
<script type="text/javascript">
function CloseOpenPanel(obj) {
alert(document.getElementById('<%= lb_closePanel.ClientID %>').value); //here it comes undefined!!!!
if (document.getElementById('<%= lb_closePanel.ClientID %>').value == 'X') {
document.getElementById(obj).Visible = false;
lb_closePanel.Text = '+';
}
else {
document.getElementById(obj).Visible = true;
lb_closePanel.Text = 'X';
}
}
</script>
Your code is OK, just instead of the property value use innerHTML
alert(document.getElementById('<%= lb_closePanel.ClientID %>').innerHTML);
Instead of using .value, try using .innerHTML instead to get the text inside of your link button (rendered as an a tag)
I am trying to hide the div's when different buttons are clicked but I don't know how to. (So when 'Test 1' is clicked it should hide 'Test 2' Div and vice versa) I checked here and on Google but couldn't find an answer for it.
Javascript :
function showHide(divId) {
var theDiv = document.getElementById(divId);
if (theDiv.style.display == "none") {
theDiv.style.display = "";
} else {
theDiv.style.display = "none";
}
}
HTML :
<input type="button" onclick="showHide('hidethis')" value="Test It">
<div id="hidethis" style="display:none">
<h1>TEST ME!</h1>>
</div>
<input type="button" onclick="showHide('hidethis2')" value="Test It 2">
<div id="hidethis2" style="display:none">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
JSFIDDLE: is not doing it here but works locallyhttp://jsfiddle.net/S5JzK/
<input type="button" onclick="showHide('hidethis')" value="Test It" />
<div id="hidethis" style="display:none">
<h1>TEST ME!</h1>
</div>
<input type="button" onclick="showHide('hidethis2')" value="Test It 2">
<div id="hidethis2" style="display:none">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
function showHide(divId) {
$("#"+divId).toggle();
}
Check the Fiddle http://jsfiddle.net/S5JzK/7/
Please try this, it works well and so simple,
<html>
<head>
<style>
.manageDiv{
display:none;
}
</style>
</head>
<body>
<input type="button" class="testButton" value="Test It" />
<input type="button" class="testButton" value="Test It 2" />
<div id="hidethis2" class="manageDiv">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
</body>
</html>
$(function(){
$(".testButton").on("click", function(){
$("#hidethis2").toggleClass("manageDiv");
});
});
To it work in fiddle, in your example, you need to select (No wrap - in head) on the left.
Look the example below, using pure javascript:
HTML
<input type="button" onclick="showHide('hidethis')" value="Test It">
<div id="hidethis" style="display:none">
<h1>TEST ME!</h1>
</div>
<input type="button" onclick="showHide('hidethis2')" value="Test It 2">
<div id="hidethis2" style="display:none">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
JAVASCRIPT
function showHide(divId) {
/* Hide all divs */
var elements = document.getElementsByTagName('div');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = "none";
}
/* Set display */
var theDiv = document.getElementById(divId);
theDiv.style.display = "";
}
http://jsfiddle.net/S5JzK/9/
ANOTHER JAVASCRIPT EXAMPLE
function showHide(divId) {
/* Hide the divs that you want */
var div1 = document.getElementById('#hidethis');
var div2 = document.getElementById('#hidethis2');
div1.style.display = "none";
div2.style.display = "none";
/* Set display */
var theDiv = document.getElementById(divId);
theDiv.style.display = "";
}
Using JQuery:
function showHideDiv(divId, bShow) {
if (bShow) {
$("#" + divId).show();
} else {
$("#" + divId).hide();
}
}
your code seems fine. are you sure you enter the function upon click? try adding a breakpoint using developer tools or an alert.
Anyways, I see you tagged this post with jquery. you can you it to do the task more elegantly.
$("#" + theDiv).hide();
or for showing it:
$("#" + theDiv).show();
"JSFIDDLE: is not doing it here but works locally"
Yes, because by default jsfiddle wraps your JS in an onload handler, which means the function declaration is local to that handler. Inline html attribute event handlers like your onclick="showHide('hidethis')" can only call global functions.
Under jsfiddle's Frameworks & Extensions heading there's a drop-down where you can change the default "onload" to "No wrap - in head" (or "No wrap - in body"). That'll make your function declaration global as in your local implementation.
Demo: http://jsfiddle.net/S5JzK/8/
I am trying to pass a string to the onclick value of a div and it's just not working, have tried a million ways of doing it and this is what I have at the moment. I have tried passing different strings, plain text etc.. but nothing seems to be placed in the onclick value.
script:
function openPopup(imgname) {
document.getElementById('popup').style.display = 'block';
document.getElementById('delimg').src = 'imgstore/' + imgname;
document.getElementById('confirm').onclick = 'location.href=\'nextpage.php\'\;';
}
function closePopup() {
document.getElementById('popup').style.display = 'none';
}
and my div:
<div id="confirm" style="top:220px; left:100px;" class="yesnobutton" onclick="">
YES
</div>
I've looked on this site and I can't find a solution anywhere..thanks!
edit (ive moved the script below the div.. still not doing anything :( ):
<div id='popup' class='popup' style='display:none'>
<h5>Are you sure you wish delete this ad?</h5>
<div style='height:96px; width:128px; border:1px solid black; top:70px; left:50px; position:absolute;'>
<img id='delimg' src="" style='max-height:96px; max-width:128px;'>
</div>
<br>
<div id='confirm' style='top:220px; left:100px;' class='yesnobutton' onclick=''>
YES
</div>
<div style='top:220px; right:100px;' class='yesnobutton' onClick='closePopup()'>
NO
</div>
</div>
<script type='text/javascript'>
function openPopup(imgname) {
document.getElementById('popup').style.display = 'block';
document.getElementById('delimg').src = 'imgstore/' + imgname;
document.getElementById('confirm').onclick = 'location.href=\'newurl.html\'\;';
}
function closePopup() {
document.getElementById('popup').style.display = 'none';
}
</script>
Try to set a function to the onclick attribute.
<body>
<div id="confirm" style="top:220px; left:100px;" class="yesnobutton" onclick="">
YES
</div>
<script>
document.getElementById('confirm').onclick = function() {
location.href = 'nextpage.php';
}
</script>
</body>