Anyone can tell me why even though by debugging with fireBug the script correctly finds the proper element, the style.display doesn't update the property of the ul which remains set to none?
<html>
<div id="nav">
<ul>
<li>Studio
</li>
</ul>
</div>
<div id="subnav1">
<ul style="display: none">
<li>normally hidden
</li>
</ul>
</div>
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript">
function show()
{
var subNav1 = document.getElementById("subnav1");
var ull = subNav1.getElementsByTagName("ul");
for (var i = 0, ii = ull.length; i < ii; i++)
{
if(ull[i].style.display == "visible")
{
ull[i].style.display = "none";
}
else
{
ull[i].style.display = "visible";
}
}
};
</script>
</html>
"visible" is not a valid css display value. I think you are looking for "block"
Related
i have a main html page (index.html)
<body>
<script type="text/javascript">
function active(el) {
var sections = document.querySelectorAll('.sidebar>li');
for (i = 0; i < sections.length; i++) {
sections[i].classList.remove('current');
}
el.classList.add('current');
}
</script>
<h1 onclick="active(this); load('content','pages/home.html')" class="sidebar-title">GOSSAMER LAN</h1>
<ul class="sidebar">
<li onclick="active(this); load('content','pages/network.html')">
<h2>Network settings</h2>
<small>Edit configuration</small>
</li>
</ul>
</section>
<section id="content"></section>
</section>
<script type="text/javascript" src="js/main.js"></script>
</body>
and network setting view (network.html) that has a button
<div class="save-button" onclick="validation();">Save changes</div>
what i want to do is on clicking the button to return to view (home.html)
function validation() {
var inputs = document.querySelectorAll('input[type=text],input[type=password]');
var input = [];
for (p = 0; p < inputs.length; p++) {
input.push(inputs[p].value);
if (!inputs[p].parentNode.classList.contains("deactive")) {
inputs[p].value == "" ? inputs[p].classList.add("error") : inputs[p].classList.remove("error")
}
}
if (input.indexOf("") == -1) {
sendData();
load("content","pages/home.html");
}
via my java script code
function load(page,src) {
console.log( document.getElementById(page));
document.getElementById(page).innerHTML='<object type="text/html" id="dynamic-'+page+'" data="'+src+'" style="width:100%; height: 100%;" ></object>';
}
load("content","pages/home.html");
i have put most of my code to make it kind of detailed as to what i hope to achieve i am getting Cannot set property 'innerHTML' of null when executing the onclick function (validation)
please any help ?
thank you
I'm working with HTML and JavaScript and I need to make two instances of a toggle link. Here is my code for a single one:
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "link1";
}
else {
ele.style.display = "block";
text.innerHTML = "link1";
}
}
</script>
<body> <a id="displayText" href="javascript:toggle()" style="font-size:160%;">link1</a>
<div id="toggleText" style="display: none; font-size:160%;"><p>paragraph1</p></div><br></body>
I need the two toggle links to independently show/hide different paragraphs of text when each one is clicked. How can I add a second instance below the first?
Add an event handler and a data-toggle-id attribute to each link. In your event handler, get the value of the data-toggle-id and use that to find the paragraph that you would like to show. Then use the toggle method of the element's classList to add/remove a class that shows the paragraph.
var links = document.querySelectorAll('[data-toggle-id]');
for (var ix = 0; ix < links.length; ix++) {
links.item(ix).addEventListener('click', function() {
document.getElementById(this.dataset.toggleId).classList.toggle('show');
});
}
.toggleText {
display: none;
}
.show {
display: block;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<div class="container">
<a data-toggle-id="paragraph1">link1</a>
<div class="toggleText" id="paragraph1">
<p>paragraph1</p>
</div>
</div>
<div class="container">
<a data-toggle-id="paragraph2">link2</a>
<div class="toggleText" id="paragraph2">
<p>paragraph2</p>
</div>
</div>
<div class="container">
<a data-toggle-id="paragraph3">link3</a>
<div class="toggleText" id="paragraph3">
<p>paragraph3</p>
</div>
</div>
If you hate for loops, you can use Nick's suggestion and convert the NodeList to and array and use the forEach method:
Array.prototype.slice.call(document.querySelectorAll('[data-toggle-id]')).forEach(function(element) {
element.addEventListener('click', function(){
document.getElementById(this.dataset.toggleId).classList.toggle('show');
});
});
This question maybe stupid for many here. I have a bunch of divs and want to make them appear/disappear on click with special behaviour:
On-load state: all divs visible
click: all divs disappear, except for the one that was selected when clicking
to n-th click: toggle visibility for the div that was selected when clicking
What I've got so far:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
function toggle_class(id) {
var thisElem = document.getElementById(id);
var invisible = "invisible";
var visible = "visible";
var classes = thisElem.classList;
if (classes == invisible) {
thisElem.className = thisElem.className.replace(invisible, visible);
}
else {
thisElem.className = thisElem.className.replace(visible, invisible);
}
}
<ul id='list'>
<li id='1-i' class='visible'>Toggle DIV #1</li>
<li id='2-i' class='visible'>Toggle DIV #2</li>
<li id='3-i' class='visible'>Toggle DIV #3</li>
<li id='4-i' class='visible'>Toggle DIV #4</li>
</ul>
<div id='1' style='display: block;'><h3>DIV #1</h3></div>
<div id='2' style='display: block;'><h3>DIV #2</h3></div>
<div id='3' style='display: block;'><h3>DIV #3</h3></div>
<div id='4' style='display: block;'><h3>DIV #4</h3></div>
This code shows all divs on page-load, then toggles visibility for the selected div on click. So on first click only the selected div will disappear with all others staying still visible - the opposite of what I want. Though from second click on, this behaviour is the desired one.
I have found similar other threads (like this one), but their issues seem to add complexity I'd like to avoid.
Thanks a lot for your help!
Edit:
Now I tried to update function toggle_class(id) { following Arun P Johny's example:
var firstrun = true;
function toggle_class(id) {
var thisElem = document.getElementById(id);
var invisible = "invisible";
var visible = "visible";
if (thisElem.className == 'invisible' && !firstrun) {
thisElem.className = thisElem.className.replace(invisible, visible);
} else {
thisElem.className = thisElem.className.replace(visible, invisible);
}
if (firstrun) {
var children = document.getElementsByClassName('visible');
for (var i = 0; i < children.length; i++) {
if (children[i].id != id) {
children[i].className = thisElem.className.replace(visible, invisible);
}
}
}
firstrun = false;
}
The result is somewhat confusing: On first click, the selected element changes its class to invisible (which I do understand, since the script tries to replace the class visible with invisible for all elements). So this is not the behaviour I want, the clicked element is supposed to keep the class visible (until it is clicked again, since this is when the div disappears).
And the even more confusing part to me: Not all other elements change their class to invisible, but only every second element.
What did I do wrong?
Overly simplified version: http://jsfiddle.net/9ref3cf2/
HTML
<ul id='list'>
<li data-id="1">Toggle DIV #1</li>
<li data-id="2">Toggle DIV #2</li>
<li data-id="3">Toggle DIV #3</li>
<li data-id='4'>Toggle DIV #4</li>
</ul>
<div data-id='1' class="listBlock"><h3>DIV #1</h3></div>
<div data-id='2' class="listBlock"><h3>DIV #2</h3></div>
<div data-id='3' class="listBlock"><h3>DIV #3</h3></div>
<div data-id='4' class="listBlock"><h3>DIV #4</h3></div>
JavaScript
function toggleListBlocks() {
$('.listBlock').hide();
$('.listBlock[data-id='+ $(this).data('id') +']').show();
}
$(document).ready(function(){
$('#list>li').click(toggleListBlocks);
});
One approach is to assign a class to all the toggled div elements and use them to fetch and hide them
<div id='1' class="toggle" style='display: block;'><h3>DIV #1</h3></div>
<div id='2' class="toggle" style='display: block;'><h3>DIV #2</h3></div>
<div id='3' class="toggle" style='display: block;'><h3>DIV #3</h3></div>
<div id='4' class="toggle" style='display: block;'><h3>DIV #4</h3></div>
then
var first = true;
function toggle_visibility(id) {
var e = document.getElementById(id), toggle;
if (e.style.display == 'block' && !first) {
e.style.display = 'none';
} else {
e.style.display = 'block';
var children = document.getElementsByClassName('toggle');
for(var i = 0; i<children.length; i++){
if(children[i].id != id){
children[i].style.display = 'none';
}
}
}
first = false;
}
Demo: Fiddle
Using classList, you may have to include a shim to support older browsers
<div id='1' class="toggle"><h3>DIV #1</h3></div>
<div id='2' class="toggle"><h3>DIV #2</h3></div>
<div id='3' class="toggle"><h3>DIV #3</h3></div>
<div id='4' class="toggle"><h3>DIV #4</h3></div>
then
var first = true;
function toggle_visibility(id) {
var thisElem = document.getElementById(id);
var classes = thisElem.classList;
if (classes.contains('hidden') || first) {
classes.remove('hidden');
var children = document.getElementsByClassName('toggle');
for (var i = 0; i < children.length; i++) {
if (children[i].id != id) {
children[i].classList.add('hidden');
console.log('x')
}
}
} else {
classes.add('hidden');
}
first = false;
}
Demo: Fiddle
I need help. I want elements to be shown when clicking on their siblings. I want to do this stuff with pure javascript.
When I run my code and I click on the neither nothing happens nor errors are shown in the browser console (Chrome and Firefox).
I think one problem could be the onclick event inside de window.onload function, but I don't find the way to fix it.
Here's my HTML code:
<div class="year_element">
<h3 class="year">2015</h3>
<ul class="hide_months months">
<li>Marzo
</li>
</ul>
</div>
<div class="year_element">
<h3 class="year">1998</h3>
<ul class="hide_months months">
<li>Mayo
</li>
</ul>
</div>
<div class="year_element">
<h3 class="year">1987</h3>
<ul class="hide_months months">
</ul>
</div>
And here's my JavaScript code:
window.onload = function() {
var years = document.getElementsByClassName('year');
//When doing click on a year, show months
for (var i = 0; i < years.length; i += 1) {
//Function needs event as parameter to work
years[i].onclick = function(event) {
var selectedYear = event.target;
var month_list = selectedYear.nextSibling.nextSibling;
//Showing months
if (month_list.classList.contains('hide_months')) {
month_list.classList.remove('hide_months');
//Hiding months
} else {
month_list.classList.add('hide_months');
}
};
};
}
Your answers telling me the code worked, gave me the key of the problem: another file js was executing a window.onload function so this one didn't work. This has been fixed by using.
window.addEventListener("load", one_function, false);
window.addEventListener("load", another_function, false);
Thanks.
Are you running your javascript correctly?
I pasted everything into a html file, and the click seems to work.
It adds and removes the hide_months class. I don't have your css to make Marzo/Mayo dissapear, but looks like the loading and clicking are working as expected.
<script type="text/javascript">
window.onload = function() {
var years = document.getElementsByClassName('year');
//When doing click on a year, show months
for (var i = 0; i < years.length; i += 1) {
console.log('found some elements');
//Function needs event as parameter to work
years[i].onclick = function(event) {
var selectedYear = event.target;
var month_list = selectedYear.nextSibling.nextSibling;
//Showing months
if (month_list.classList.contains('hide_months')) {
month_list.classList.remove('hide_months');
//Hiding months
} else {
month_list.classList.add('hide_months');
}
};
};
}
</script>
Hm I try your example and it work fine in chroma.
I just add CSS that should work for this purpose.
<html>
<body>
<div class="year_element">
<h3 class="year">2015</h3>
<ul class="hide_months months">
<li>Marzo
</li>
</ul>
</div>
<div class="year_element">
<h3 class="year">1998</h3>
<ul class="hide_months months">
<li>Mayo
</li>
</ul>
</div>
<div class="year_element">
<h3 class="year">1987</h3>
<ul class="hide_months months">
</ul>
</div>
<script>
window.onload = function() {
var years = document.getElementsByClassName('year');
//When doing click on a year, show months
for (var i = 0; i < years.length; i++) {
//Function needs event as parameter to work
years[i].onclick = function(event) {
var selectedYear = event.target;
var month_list = selectedYear.nextSibling.nextSibling;
//Showing months
if (month_list.classList.contains('hide_months')) {
month_list.classList.remove('hide_months');
//Hiding months
} else {
month_list.classList.add('hide_months');
}
};
};
}
</script>
<style>
.year_element{font-weight: normal;}
.year{font-weight: bold; cursor: pointer;}
.months{color: green;}
.hide_months{display: none;}
</style>
</body>
</html>
I have Javascript tabs which show/hide divs instead of loading new pages. The tabs have a style which gives a hover effect. I now want to add an active style to match up with the curently visible div.
THE JAVASCRIPT, which does not work as it is from a version which loads pages:
function setActive() {
aObj = document.getElementById('nav').getElementsByTagName('a');
for(i=0;i < aObj.length;i++) {
if(document.location.href.indexOf(aObj[i].href) >= 0) {
aObj[i].className='active';
}
}
}
function showdiv(id){
document.getElementById(id).style.display = "block";
}
function hidediv(id){
document.getElementById(id).style.display = "none";
}
THE STYLE:
#pageAdmin { display:block; }
#userAdmin { display:none; }
THE HTML:
<ul id="nav">
<li><a onclick="showdiv('pageAdmin'); hidediv('userAdmin')"
href="#">Page Admin</a></li>
<li><a onclick="showdiv('userAdmin'); hidediv('pageAdmin')"
href="#">User Admin</a></li>
</ul>
<div id="pageAdmin">
<h1>Page admin</h1>
</div>
<div id="userAdmin">
<h1>User admin</h1>
</div>
This is my first question on SO, so I hope it is appropriate - please accept my apologies in advance if it is not!
Your setActive function isn't very helpful. And using location, href and hash it will be hard doing what you want.
You may change your script to
function showdiv(id){
var el = document.getElementById(id);
el.style.display = "block";
el.className = "active";
}
function hidediv(id){
var el = document.getElementById(id);
el.style.display = "none";
el.className = "";
}
Now it should do what you want.
However, you should take a look on jQuery.
Using jQuery you do eliminate the use of getElementById and you can much simpler attach an eventhandler for onclick's, as by using vanilla js. It is considered as bad practice to setup handlers in html attributes.
jQuery also handles you the splitting and joining the space separated className string, if you want to use multiple styles.
Using jQuery it looks like:
$("a", "#nav").click(function () {
var $navA = $(this);
var tabName = $navA.attr("data-tabName");
$(".tab").each(function () {
var $tab = $(this);
if ($tab.attr("id") === tabName) {
$tab.css({ display: 'block' }); // you may move this into active style
$tab.addClass("active");
$tab.removeClass("inactive");
}
else {
$tab.css({ display: 'none' }); // you may move this into inactive style
$tab.removeClass("active");
$tab.addClass("inactive");
}
});
});
The HTML for the jQuery example
<ul id="nav">
<li><a data-tabName="pageAdmin" href="#">Page Admin</a></li>
<li><a data-tabName="userAdmin" href="#">User Admin</a></li>
</ul>
<div class="tab" id="pageAdmin">
<h1>Page admin</h1>
</div>
<div class="tab" id="userAdmin">
<h1>User admin</h1>
</div>