I have a bunch of items setup with <div id="first" class="source">
I'm in Google Chrome, and when page loads it hides those items when I click the OnClick button it will un hide them, but I'm not able to click it again and make it hide.
HTML
<body onload="setup();">
<a href="#first" onClick="shoh('first');" >
JS:
function setup() {
foo = document.getElementById('first');
foo = document.getElementsByClassName('source');
for (c=0; c<foo.length; c++) {
foo[c].style.display='none'
}
}
function shoh(id) {
if (document.getElementById(id).style.display = 'none'){
var divs = document.getElementById(id);
for(var i=0; i<divs.length; i++) {
divs[i].style.display='block'
}
} else {
cow = document.getElementById(id);
for(a=0; a<cow.length; a++) {
cow[a].style.display='none'
}
}
}
Your conditional isn't doing a comparison. You need to change
if (document.getElementById(id).style.display = 'none'){
to
if (document.getElementById(id).style.display == 'none'){
You have a couple of issue here:
If you compare two variables you need to use ==, so therefore it should be:
document.getElementById(id).style.display == 'none'
Also, you are using getElementById, which returns a single node, not an array. So therefore you should not loop over the returned value:
var div = document.getElementById(id);
div.style.display='block';
So in the end, it should look like this:
function shoh(id) {
if (document.getElementById(id).style.display == 'none'){
var div = document.getElementById(id);
div.style.display='block';
} else {
cow = document.getElementById(id);
cow.style.display='none';
}
}
Related
echo "<div id=\"userinfo\"><p><strong>$username</strong></p><p>Bids: <strong>$bids</strong></div>
<script>
var usn = document.getElementById('userstuff');
menu = document.getElementById('userinfo');
if (usn)
{
usn.addEventListener('click',toggle_menu);
}
function toggle_menu()
{
alert('clicked');
if (menu.style.display == '')
{
menu.style.display='block';
}
else if (menu.style.display == 'block')
{
menu.style.display='';
}
}
</script>";
This code works on the first click. By default, the display value in menu is set to 'none'. The first click, the user is alerted 'clicked' and the menu becomes visible. However, on more clicks, the user is alerted 'clicked' but the menu does not become invisible and the 'hidden' alert does not show.
Remember that = is for assignment, use == for comparison. Another problem is that checking menu.style.display only checks inline styles of the node, such as:
<div style="display: none"></div>
Thus if the style is not set comparison will fail. '' comparison instead of 'none' works because by default the properties are empty strings if not set, seen here.
A few other recommendations: always declare your variables with var to prevent global scope pollution with many global variables. Here's the final JavaScript:
var usn = document.getElementById('userstuff'),
menu = document.getElementById('userinfo');
if (usn) {
usn.addEventListener('click', toggle_menu);
}
function toggle_menu() {
alert('clicked');
if(menu.style.display == '' || menu.style.display == 'none') {
menu.style.display = 'block';
return;
} else if (menu.style.display == 'block') {
menu.style.display = 'none';
return;
}
}
I'm a newbie in javascript, so i need all your help.
So basically i'm trying to do ondrop function(validate), so when I drop something for the first time, the validate function will run and drop the div value from the php. But for the second time and so on, if I dropped the same div value I want it to alert duplicate and remove that div element(the duplicate), but I'm unsuccessfull in detecting the duplicate div.
Can anyone tell me whats wrong with my code?
I have a javascript, php, and html like this:
<script type="text/javascript">
function dragIt(target, e) {
e.dataTransfer.setData('div', target.id);
return false;
}
function validate(target, e){
var id = e.dataTransfer.getData('div');
var clone = document.getElementById(id).cloneNode(true);
var allValues = [];
for (i=0; i<clone.length; i++)
{
if (clone[i].value != "")
{
allValues[i] = clone[i].value.toLowerCase();
}
}
allValues.sort();
var uniqueValues = [];
var idx = 0;
var prevValue = allValues[0];
var currValue = allValues[0];
for (i=0; i<allValues.length; i++)
{
currValue = allValues[i];
if (currValue != prevValue){idx++;}
uniqueValues[idx] = currValue;
prevValue = currValue;
}
if (uniqueValues.length != allValues.length)
{
e.preventDefault();
clone.parentNode.removeChild(clone);
alert('Cannot submit duplicate entries');
return false;
}
else {
alert(clone.id);
e.preventDefault();
target.appendChild(clone);
return true;
}
}
EDIT:
Ive edited my code a little thanks to Alexander's advice, but im still getting the problem of the contents of the div not showing, ive looked up proper closing and cant see where else or if i need to add it anywhere else in the code. My update question is, what am i missing for this to work? Thanks
I have a table which is generated from a query, in this table there is a div, i need this div to show/hide onclick, now i have a working show/hide javascript (shown below) but this only works for 1 div.
how do i modify this so that my divs with id's generated from my database ($id) can all be shown/hidden seperatly?
javascript:
<script language="javascript">
function toggle(id) {
var ele = document.getElementById(id);
var text = document.getElementById(id);
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
html:
Info: <a id='$id' href='javascript:toggle(\"$id\");'>show</a>
<div id='$id' style='display: none'></div>
in your generated HTML you can pass id value to your toggle() function so resulting HTML code will look like
Info: <a id='$id' href='javascript:toggle("$id");'>show</a>
<div id='$id' style='display: none'></div>
javascript
function toggle(id) {
var ele = document.getElementById(id);
var text = document.getElementById(id);
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
I have a textbox.
Now when the page is opened i want the textbox to have a default value.Once he click on the textbox the value should disappear and again when he removes his cursor from the text box ,the old value should come back.
So how do i do this ?
Thanks
Add a specific class to all textboxes on the page that you want to have this functionality.
Then, use this code to apply the functionality to the elements that have the class:
window.onload = function() {
var elements = document.querySelectorAll('.yourClassName');
for(var i = 0, j = elements.length; i < j; i++) {
var element = elements[i];
element.onfocus = function() {
this.value = '';
this.style.color = 'black';
};
element.onblur = function() {
if(this.value == '') {
this.value = this.getAttribute('defaultValue');
this.style.color = 'grey';
}
};
element.onblur();
}
};
Working example: http://jsfiddle.net/6TmGA/1/
Can you use jQuery?
If you can there are a lot of plugins that will help with this.
such as;
http://www.jason-palmer.com/2008/08/jquery-plugin-form-field-default-value/
<script language="JavaScript">
function setFocus() {
document.getElementById('username').focus();
}
</script>
how can i change the style of menu, if it is selected, without php?
i can do it by php
`<? if($_GET[id] == "this_menu") echo "style='color:red'"?>`
but i want to do it without php. is it possible? thanks
if (document.location.search.match(/[?&]id=this_menu([&.*])?$/)) {
document.getElementById('yourId').setAttribute('style', 'color: red');
}
Do you want to do that on client? if so, use JavaScript.
With JS
document.getElementById(gup("param")).setAttribute('style', 'color: red');
function gup( param )
{
var name =
param.toLowerCase();
var regexS =
"[\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var tmpURL = window.location.href;
var results = egex.exec( tmpURL );
if( results == null )
{ // Try to find an
alternative value
if (typeof alternatives == "object")
{
if(typeof alternatives[name] !="undefined")
{
return alternatives[name];
}
}
return "";
}
else
{
return results[1];
}
};
it can be done easily done by javascript:
use something like this
document.getElementById('myMenu').style.color='#f0f0f0';