I am using this javascript and code to hide/show certain divs but on each click, there are multiple divs on the page that I want to hide/show so I would rather do it by class name. I don't really know javascript so the simpler, the better.
Here is the javascript:
<script type="text/javascript"><!--
function show_visibility(){
for(var i = 0,e = arguments.length;i < e;i++){
var myDiv = document.getElementById(arguments[i]).style;
myDiv.display = "block";
}
}
function hide_visibility(){
for(var i = 0,e = arguments.length;i < e;i++){
var myDiv = document.getElementById(arguments[i]).style;
myDiv.display = "none";
}
}
//--></script>
Here is the html:
<ul id="menubar_index" style="display:block;" class="index">
<li>Home</li>
<li>How It Works</li>
<li>Testimonials</li>
<li>FAQ</li>
</ul>
<ul id="menubar_how" style="display:none;" class="howitworks">
<li>Home</li>
<li>How It Works</li>
<li>Testimonials</li>
<li>FAQ</li>
</ul>
You may want:
document.querySelector / document.querySelectorAll - they will allow you to select elements using CSS-like rules;
document.getElementsByClassName - this one will simply search by class names.
Related
I have an array in javascript called menuElm that has <ul> elements in it:
<ul id="1"></ul>
<ul id="2"></ul>
<ul id="3"></ul>
I have a page in HTML that has the following:
<ul id="menu">
<li class="menu-item"></li>
<li class="menu-item"></li>
<li class="menu-item"></li>
</ul>
I want to add the elements of menuElm to the HTML page so it would look like this:
<ul id="menu">
<li class="menu-item">
<ul id="1"></ul>
</li>
<li class="menu-item">
<ul id="2"></ul>
</li>
<li class="menu-item">
<ul id="3"></ul>
</li>
</ul>
I have tried the following, but the <ul> elements just wont show up in the page nor in the code:
function CreateMenu() {
var menuElm;
var k = 0;
menuElm = createElm("ul");
menuElm.id = ++k;
for (var i = 0; i < menuElm.length; ++i) {
document.getElementsByClassName("menu-item")[i].appendChild(menuElm[i]);
}
}
I am new with JavaScript, what am I doing wrong?
menuElm.length
The ul element doesn't have a length, so you are looping from 0 to 0, which is 0 iterations.
menuElm = createElm("ul");
This function isn't defined. You need document.createElement('ul');
menuElm = createElm("ul");
menuElm.id = ++k;
You appear to be creating one list item, and then changing its ID and appending it multiple times.
You need a new list item each time you go around the loop.
appendChild(menuElm[i]);
You've been treating menuElm as an element previously. It isn't an array, [i] makes no sense here.
$("#menu").find('li').each(function(i){
$(this).append(menuElm[i]);
});
/* if you want to use jquery here is the code to append */
I want to know how to change the style of an particular <li> in a particular <ul> by JavaScript
My code goes something like this
<ul id="menu">
<li id="number1">1</li>
<li id="number2">2</li>
</ul>
Now let's say I want to change the background color of the li#number1 of the ul#menu using JavaScript.
This is your solution in plain JavaScript:
var el = document.querySelector('#number1');
el.addEventListener('click', function(e) {
el.style.backgroundColor = 'blue';
});
Here is a solution using javascript and button.
<script>
function doSth(){
var nodes = document.getElementById("menu").getElementsByTagName("li");
for(var i=0; i<nodes.length; i++) {
if (nodes[i].id == 'number2') {
nodes[i].style.background = "blue";
}
}
}
</script>
<ul id="menu">
<li id="number1">1</li>
<li id="number2">2</li></ul>
<input type="button" onClick="doSth();" value="Click here"/>
i have this assignment running good but stuck on where i have to reset values. i have tried .removeEventListener which doesn't work the way i want it and also i don't wanna reload the page. Below are my codes...
Html
<!DOCTYPE html>
<html>
<head>
<title>Table Soccer Teams</title>
<link rel="stylesheet" type="text/css" href="soccer.css" />
<script type="text/javascript" src="table_soccer.js" ></script>
</head>
<body>
<a id="reset" href ="#" class="btn" >Reset</a>
<div id="soccer_field">
<div class="players" onsubmit="return(validateForm ());">
<h2>Possible Players</h2>
<ul id="first">
<li class="list-item">Player 1</li>
<li class="list-item">Player 2</li>
<li class="list-item">Player 3</li>
<li class="list-item">Player 4</li>
<li class="list-item">Player 5</li>
<li class="list-item">Player 6</li>
<li class="list-item">Player 7</li>
<li class="list-item">Player 8</li>
</ul>
<p class="three">Click on names above to select player </p>
</div>
<div class="actual_players">
<h3>Actual Players</h3>
<ul id="actual-players" ></ul>
<p class="two">Click button below to generate Teams</p>
<a id="generate" href ="#" class="btn">Click here</a>
</div>
<div class="teams">
<h1>Teams</h1>
<h4>Team 1</h4>
<p id="forward-one"><span>Forward:</span></p>
<p id="defender-one"><span>Defender:</span></p>
<h5>Team 2 </h5>
<p id="forward-two"><span>Forward:</span></p>
<p id="defender-two"><span>Defender:</span></p>
</div>
</div>
</body>
</html>
Javascript
function init(){
var listItems = document.getElementsByClassName("list-item");
for(var i=0; i<listItems.length; i++){
listItems[i].addEventListener("click", function(){
var text = this.innerHTML;
var liElement = document.createElement("LI");
liElement.ClassName = "test";
var text = document.createTextNode(text);
liElement.appendChild(text);
var lis = document.getElementById("actual-
players").getElementsByTagName("li");
if (lis.length == 4){
alert("Don't let more than four players");
} else {
document.getElementById("actual-
players").appendChild(liElement);
this.remove();
}
});
}
document.getElementById("generate").addEventListener("click",
function(){
var temp = [];
var t = document.getElementById("actual-
players").getElementsByTagName("li");
for(var i=0; i<t.length; i++){
temp.push(t[i]);
}
var x = temp.length;
if (x < 4 || x == null) {
alert("Actual players field must not be empty or have less
than 4 players");
return false;
}
var positions = ["forward-one", "defender-one", "forward-two",
"defender-two"];
for (var i = 0; i < 4; i++){
var index = Math.floor(Math.random()*temp.length);
var player = temp[index];
document.getElementById(positions[i]).appendChild(player);
temp.splice(index, 1);
}
});
Below is where i wanna write my reset codes... i want the distributed players to be removed when reset is clicked...
document.getElementById("reset").addEventListener("click", function()
{
});
Here is the doc of element.removeEventListener
Try to pass a named function (not an anonymous one) to addEventListener and removeEventListener.
var generate_element = document.getElementById("generate");
var generate_func = function(){...};
generate_element.addEventListener("click",generate_func);
// and later in your code
generate_element.removeEventListener("click",generate_func);
Removing the event listener will not change the DOM tree itself.
You can either populate it using an id and use
document.removeChild(document.getElementById("yourId"))
but then you need to keep track of "yourId" when creating it. -In case you will need this value later it could make sense.
OR
you can simply clear the content:
document.getElementById("forward-one").innerHTML = "<p id='forward-one'><span>Forward:</span></p>";
but in that case make it nicer and move the id to a div in html:
<p><span>Forward:</span><div id="forward-one">Apa, www</div></p>
and then use:
document.getElementById("forward-one").innerHTML = "";
Firsty here is the html which corresponds with the code
<div class="grid_12">
<ul id="categories">
<li class="filter">Categories:</li>
<li id="ny"> New York</li>
<li id="sc">Spanish Cities</li>
<li id="gv">A Glasgow Viewpoint</li>
<li id="sch">Some Churches</li>
<li id="bh">Barcelona Highlights</li>
<li id="mp">Martin’s Pictures</li>
</ul>
</div>
<!-- end .grid_12 - CATEGORIES -->
The idea here is that when each of these links are pressed a var id is changed to the correct number depending on which is clicked
Here is the code i have used to do this
if (nyView.click) {
id = 1;
} else if (scView.click) {
id = 2;
} else if (gvView.click) {
id = 3;
} else if (schView.click) {
id = 4;
} else if (bhView.click) {
id = 5;
} else if (mpView.click) {
id = 6;
}
the view vars are simply locators to find the correct div element so they are done like this
nyView = document.getElementById('ny');
scView = document.getElementById('sc');
gvView = document.getElementById('gv');
schView = document.getElementById('sch');
bhView = document.getElementById('bh');
mpView = document.getElementById('mp');
My issue is that no matter the element i clicked i only get the orginal... for me it seems like the code groups it all together so when u click the ny link it takes this as all other divs are clicked. This was tested as when i clicked the ny link innerHTML in all divs was executed... i am completely stuck as to why this is so would greatly appreciate the help
You don't need inline event handlers
You can use event delegation
Use index to get the clicked element index in ul
HTML
<div class="grid_12">
<ul id="categories">
<li class="filter">Categories:</li>
<li id="ny"> New York
</li>
<li id="sc">Spanish Cities
</li>
<li id="gv">A Glasgow Viewpoint
</li>
<li id="sch">Some Churches
</li>
<li id="bh">Barcelona Highlights
</li>
<li id="mp">Martin’s Pictures
</li>
</ul>
</div>
Javascript
var id;
$('#categories').on('click', 'li>a', function () {
id = $(this).closest('li').index();
});
Demo: http://jsfiddle.net/tusharj/q9xbqck0/3/
When you say nyView.click you are referring to the function definition and that would always be treated as true value, so you would get first condition always.
var id;
$('#categories').on('click', 'li', function(){
id = this.id; // id = $(this).index();
});
My approach is very different, maybe someone else can work with your logic. I can't. My approach:
<div class="grid_12">
<ul id="categories">
<li class="filter">Categories:</li>
<li class="licategory" data-val="ny" data-id="1"> New York</li>
<li class="licategory" data-val="sc" data-id="1">Spanish Cities</li>
<li class="licategory" data-val="gv" data-id="1">A Glasgow Viewpoint</li>
<li class="licategory" data-val="sch data-id="1"">Some Churches</li>
<li class="licategory" data-val="bh" data-id="1">Barcelona Highlights</li>
<li class="licategory" data-val="mp" data-id="1">Martin’s Pictures</li>
</ul>
$("li").on("click",function(){
$("this").data("val");
$("this").data("id");
})
Add one common class like .categoryin all li and get the index()
$(".category").click(function(){
// console.log(this.id);
alert($(this).index())
});
Fiddle
nyView.click returns a function that's why value of id =1 always no matter which link you clicked.....try this code
<!doctype html>
<html>
<head>
<script>
function getImageCategories(element) {
var nyView = document.getElementById('ny');
var scView = document.getElementById('sc');
var gvView = document.getElementById('gv');
var schView = document.getElementById('sch');
var bhView = document.getElementById('bh');
var mpView = document.getElementById('mp');
var id=0;
if (element.parentNode === (nyView)) {
id = 1;
} else if (element.parentNode===scView) {
id = 2;
} else if (element.parentNode===gvView) {
id = 3;
} else if (element.parentNode===schView) {
id = 4;
} else if (element.parentNode===bhView) {
id = 5;
} else if (element.parentNode===mpView) {
id = 6;
}
alert(id);
}
</script>
</head>
<body>
<div class="grid_12">
<ul id="categories">
<li class="filter">Categories:</li>
<li id="ny"> New York</li>
<li id="sc">Spanish Cities</li>
<li id="gv">A Glasgow Viewpoint</li>
<li id="sch">Some Churches</li>
<li id="bh">Barcelona Highlights</li>
<li id="mp">Martin’s Pictures</li>
</ul>
</div>
</body>
</html>
Right now my code is:
var carDiv = $("<div/>").appendTo("#content");
var eUl = $("<ul/>").appendTo(carDiv);
How do I make it into
<ul data-role="listview"> content </ul>
Instead of
<ul> content </ul>
Pretty straightforward:
var eUl = $("<ul/>").attr('data-role', 'listview').appendTo(carDiv);