I displayed 3 li elements with HTML and 3 using JavaScript code. If I change my JavaScript div tag to last it displays both the ul elements, else it's not displaying the HTML ul tags. Can you tell me why?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>my javascript eg </title>
<script type="text/javascript" >
function process()
{
var sval="<ul> <li> orange</li> <li>blue</li> <li>green</li> </ul> ";
var divid=document.getElementById("mydiv");
divid.innerHTML=sval;
}
</script>
</head>
<body onload="process()">
Hi Dude !!!
<div id="mydiv"/>
<ul id="u2" onclick="fn1()">
<li>orange</li>
<li>blue</li>
<li>yellow</li>
</ul>
<!-- If I place the same div element at last line it doesn't work. -->
</body>
</html>
use class instead of id, class is used for multiple elements
JS
function process()
{
var sval="<ul> <li> orange</li> <li>blue</li> <li>green</li> </ul> ";
var divclass=document.getElementsByClassName("mydiv");
for (var i = 0;i<divclass.length;i++){
var item = divclass[i];
item.innerHTML=sval;
}
}
HTML
<body onload="process()">
Hi Dude !!!
<div class="mydiv"></div>
<ul id="u2" onclick="fn1()">
<li>orange</li>
<li>blue</li>
<li>yellow</li>
</ul>
<div class="mydiv"></div>
</body>
Demo: http://jsfiddle.net/5avtsqnz/6/
It is because you cannot have more than one element in the DOM with the same id. If you do so you will always get only the first element with the id.
See the code, its getElementById and not getElementsById. So it it always return a single element.
Try this<------------HTML Code--------->SEE THIS YOUR CODE: http://jsfiddle.net/fbwyyrcL/
<body onload="process()">
Hi Dude !!!
<div id="mydiv"></div>
<ul id="u2" onclick="fn1()">
<li>orange</li>
<li>blue</li>
<li>yellow</li>
</ul>
</body>
<------------Script code is------->
function process()
{
var sval="<ul> <li> orange</li> <li>blue</li> <li>green</li> </ul> ";
var divid=document.getElementById("mydiv");
divid.innerHTML=sval;
}
You just have just to close your div tag properly, or to create another div around your primary ul definition. If you leave the inital ul inside the "mydiv" div, it is overwritten (deleted) after your function run.
Following code has worked for me in IE9:
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>my javascript eg</title>
<script type="text/javascript" >
function prozess(){
var sval="<ul> <li> orange</li> <li>blue</li> <li>green</li> </ul>";
var divid=document.getElementById("mydiv");
divid.innerHTML=sval;
};
</script>
</head>
<body onload = "prozess()">
Hi Dude !!!
<div id="mydiv"> </div>
<ul id="u2" onclick="fn1()">
<li>orange</li><li>blue</li><li>yellow</li>
</ul>
</body>
</html>
Related
I'm new at Javascript. I have the following code html:
<body>
<ul id="a" class="list1">
<li>Coffee</li>
<li>Tea</li>
</ul>
<ul id="b" class="list2">
<li>Coffee</li>
<li>Tea</li>
</ul>
<script type="text/javascript">
</script>
</body>
How to color the text for each last li tag in the ul tags below? I was thinking of setting id for each li tag then using getElementById() method but that is quite wordy. Is there any other way without changing the structure of the html code? Can use Jquery but I don't know much about it.
Thanks for your help.
enter image description here
<style>
li:last-child{
color:red;
}
</style>
<body>
<ul id="a" class="list1">
<li>Coffee</li>
<li class="liColorChanger">Tea</li>
</ul>
<ul id="b" class="list2">
<li>Coffee</li>
<li class="liColorChanger">Tea</li>
</ul>
<script type="text/javascript">
</script>
</body>
<style>
.liColorChanger
{
color:green;
}
</style>
<body>
<ul id="a" class="list1">
<li>Coffee</li>
<li class="liColorChanger">Tea</li>
</ul>
<ul id="b" class="list2">
<li>Coffee</li>
<li class="liColorChanger">Tea</li>
</ul>
<script type="text/javascript">
</script>
</body>
Try this instead,
Get last child (li) of every li document.querySelectorAll("ul li:last-child")
var secondli = document.querySelectorAll("ul li:last-child");
for(i=0;i<secondli.length;i++){
var li = secondli[i];
li.style.color = "red";
}
<body>
<ul id="a" class="list1">
<li>Coffee</li>
<li>Tea</li>
</ul>
<ul id="b" class="list2">
<li>Coffee</li>
<li>Tea</li>
</ul>
<script type="text/javascript">
</script>
</body>
use element selector and last child selector:
it selects all the last li in ul: find the below example
ul > li:last-child{ color:red; }
Hi Please have a look you don't need to repeat loop it's just simple you can add css.
Thanks
$(document).ready(function(){
var listA = document.querySelector("#a li:last-child");
var listB = document.querySelector("#b li:last-child");
listA.style.color = "red"
listB.style.color = "red"
})
You can achieve that through CSS, using :last-child
li:last-child{
color:red;
}
<ul id="a" class="list1">
<li>Coffee</li>
<li>Tea</li>
</ul>
<ul id="b" class="list2">
<li>Coffee</li>
<li>Tea</li>
</ul>
in js also you can achive it like below:
window.addEventListener('load',()=>{
document.querySelectorAll('li:last-child').forEach((elem)=>{elem.style.color='red'});
});
As stated by everyone - you do not need javascript or jquery for this - but in the name of learning - here is a jquery way
Iterate over each of the uls - find the li's within and select the last one... then add a class - and the styling is on the class. It isalways better to add a class with styling - rather than using jquery to add css directly.
But as noted - I would definitely usee CSS only - and use the :last-child pseudo-selector as described by other solutions.
$(document).ready(function(){
$('ul').each(function(){
$(this).find('li').last().addClass('red');
})
})
.red{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="a" class="list1">
<li>Coffee</li>
<li>Tea</li>
</ul>
<ul id="b" class="list2">
<li>Coffee</li>
<li>Tea</li>
</ul>
Here is my HTML code:
<li class="list-promotions">
<ul class="list-promotions-item">
<li>
offers
</li>
</ul>
</li>
I try to use this javascript code: (This Thread)
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementsByClassName("classname")[0].innerHTML = "qwerty";
});
It works, but it changes my HTML to:
<li class="list-promotions">
<ul class="list-promotions-item">qwerty</ul>
</li>
So I lost <a> tag and the href .
How I can solve this issue? I just want to change the offers to another text and keep the <a> tag
Note: I do not have access to the HTML code to set a class name for <a> tag and use the above javascript code.
document.querySelector(".list-promotions-item > li > a").textContent = "qwerty";
The innerHTML property sets or returns the HTML content (inner HTML)
of an element.
You had not added the classname class in HTML to anchor tag.
<li class="list-promotions">
<ul class="list-promotions-item">
<li>
offers
</li>
</ul>
</li>
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementsByClassName("classname")[0].innerHTML = "qwerty";
});
You can learn more at: https://www.w3schools.com/jsref/prop_html_innerhtml.asp
Using Jquery
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.list-promotions-item li a').html('qwerty');
});
</script>
</head>
<body>
<li class="list-promotions">
<ul class="list-promotions-item">
<li>
offers
</li>
</ul>
</li>
</body>
</html>
I have a question. I’m making a one page design website at the moment, and in one div there’s a loader where you can see what my skills are. It's an animated circle. The problem is that the loader already loads when you're on the website. But I want it to load when you click on the list item 'Skills'. So that's the third list item called #blok3.
<div id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
Below is the script of the skills loader. Als you can see in the Javascript part there are 5 id's but below I putted one because the other 5 are all te same, except the name #myStat...
<div class="statistic">
<div id="myStat1" data-dimension="150" data-text="Ai" data-info="" data-width="15" data-fontsize="38" data-percent="85" data-fgcolor="#FFF" data-bgcolor="#A7E3E7"></div>
<div class="statistic-text">Illustrator</div>
</div>
<script>
$( document ).ready(function() {
$('#myStat1').circliful();
$('#myStat2').circliful();
$('#myStat3').circliful();
$('#myStat4').circliful();
$('#myStat5').circliful();
$('#myStat6').circliful();
});
</script>
I tried some things with the knowledge that I have, but it didn't work. I hope someone can help me. Thank you :)
When I don't use any code the loader looks like this:
http://nl.tinypic.com/view.php?pic=rh1ydc&s=8#.U2T5OK00SjU
When I use the code from Krish R the loader looks like this (look at the picture below). There appear more circles, but it starts loading when you click on Skills, so that's the good part. But I don't need the double circles of course ;)
http://nl.tinypic.com/view.php?pic=1690txz&s=8#.U2T5Va00SjU
You should put the code to animate the circle in a function that is called on (executed), when the list item is clicked... As $( document ).ready(function() means that your code should execute at the instant the page loads! :D
Example:
Code:
<!doctype html>
<html lang="en">
<head>
<title>Circle</title>
<script>
function skill()
{
// the code to animate circle
alert('animated circle!');
}
</script>
</head>
<body>
<div id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>
<a onclick = "skill()" href="#blok3">
Skills
</a>
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</body>
</html>
Tested in: Firefox 24, Google Chrome 34
Update:
Since we don't have access to the circle animation code, we could completely remove it, and when Skills is clicked, we dynamically put it in using JavaScript's innerHTML .
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<title>Circle</title>
<script>
function skill()
{
var anim = document.getElementById('anim');
anim.innerHTML = '<div id="myStat1" data-dimension="150" data-text="Ai" data-info="" `data-width="15" data-fontsize="38" data-percent="85" data-fgcolor="#FFF" data-bgcolor="#A7E3E7"></div><div class="statistic-text">Illustrator</div> ';`
$('#myStat1').circliful();
$('#myStat2').circliful();
$('#myStat3').circliful();
$('#myStat4').circliful();
$('#myStat5').circliful();
$('#myStat6').circliful();
}
</script>
</head>
<body>
<div id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li onclick = "skill()">
<a onclick = "skill()" href="#blok3">
Skills
</a>
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div class="statistic" id = "anim">
</div>
</body>
</html>
Can you try this,
Javascript:
$( document ).ready(function() {
Loadcircliful();
$("#myskills").click(function(){
Loadcircliful();
return false;
});
});
function Loadcircliful(){
$('#myStat1, #myStat2, #myStat3, #myStat4, #myStat5, #myStat6').circliful();
}
in html,
<li>Skills</li>
may be this works for you...
in your html
<li id="blok3">Skills</li>
in your javascript
$('#blok3').click(function () { $('#myStat3').circliful(); });
I had an html navigation code as below
function Data(string) {
//1. get some data from server according to month year etc.,
//2. unactive all the remaining li's and make the current clicked element active by adding "active" class to the element
$('.filter').removeClass('active');
$(this).addClass('active');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" style="padding-left:21px;">
<ul class="nav nav-tabs" style="padding-left:40px;">
<li class="active filter">This Month</li>
<li class="filter">Year</li>
<li class="filter">60 Days</li>
<li class="filter">90 Days</li>
</ul>
</div>
When the user clicks on any of the tabs
all the remaining tabs should be unactive,
and the current element/tab should be active,
My code above is not working.
How to make the above code work?
I only want to use javascript onclick for this. Is there any way that the this(current) object is send when the user clicks on the tab?
Use this html to get the clicked element:
<div class="row" style="padding-left:21px;">
<ul class="nav nav-tabs" style="padding-left:40px;">
<li class="active filter">This Month</li>
<li class="filter">Year</li>
<li class="filter">60 Days</li>
<li class="filter">90 Days</li>
</ul>
</div>
Script:
function Data(string, el)
{
$('.filter').removeClass('active');
$(el).parent().addClass('active');
}
Try like
<script>
function Data(string)
{
$('.filter').removeClass('active');
$(this).parent('.filter').addClass('active') ;
}
</script>
For the class selector you need to use . before the classname.And you need to add the class for the parent. Bec you are clicking on anchor tag not the filter.
<div class="row" style="padding-left:21px;">
<ul class="nav nav-tabs" style="padding-left:40px;">
<li class="active filter">This Month</li>
<li class="filter">Year</li>
<li class="filter">60 Days</li>
<li class="filter">90 Days</li>
</ul>
</div>
<script>
function Data(element)
{
element.removeClass('active');
element.addClass('active') ;
}
</script>
You have two issues in your code.. First you need reference to capture the element on click. Try adding another parameter to your function to reference this. Also active class is for li element initially while you are tryin to add it to "a" element in the function.
try this..
<div class="row" style="padding-left:21px;">
<ul class="nav nav-tabs" style="padding-left:40px;">
<li class="active filter">This Month</li>
<li class="filter">Year</li>
<li class="filter">60 Days</li>
<li class="filter">90 Days</li>
</ul>
</div>
<script>
function Data(string,element)
{
//1. get some data from server according to month year etc.,
//2. unactive all the remaining li's and make the current clicked element active by adding "active" class to the element
$('.filter').removeClass('active');
$(element).parent().addClass('active') ;
}
</script>
You can use addEventListener to pass this to a JavaScript function.
HTML
<button id="button">Year</button>
JavaScript
(function () {
var btn = document.getElementById('button');
btn.addEventListener('click', function () {
Date('#year');
}, false);
})();
function Data(string)
{
$('.filter').removeClass('active');
$(this).parent().addClass('active') ;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript" >
function openOnImageClick(event)
{
//alert("Jai Sh Raam");
// document.getElementById("images").src = "fruits.jpg";
var target = event.target || event.srcElement; // IE
console.log(target);
console.log(target.src);
var img = document.createElement('img');
img.setAttribute('src', target.src);
img.setAttribute('width', '200');
img.setAttribute('height', '150');
document.getElementById("images").appendChild(img);
}
</script>
</head>
<body>
<h1>Screen Shot View</h1>
<p>Click the Tiger to display the Image</p>
<div id="images" >
</div>
<img src="tiger.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick(event)" />
<img src="sabaLogo1.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick(event)" />
</body>
</html>
I have the following HTML + JS. I want the toggleButton to only toggle the first io-section-header. Eventually I will have multiple toggleButton's that will toggle a unique ul.
How can I achieve this?
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div><span>Section 1</span></div>
<div class="io-section-header">
<ul>
<li class="advanced">Accounts</li>
<li class="advanced">People</li>
<li class="advanced">companies</li>
<li class="basic">She</li>
</ul>
<div><span>Section 2</span></div>
<div class="io-section-header">
<ul>
<li class="advanced">Accounts</li>
<li class="advanced">People</li>
<li class="advanced">companies</li>
<li class="basic">P</li>
</ul>
</div>
</div>
<div class="toggleButton">Collapse</div>
<script>
jQuery(function ($) {
$('.toggleButton').click(function () {
var currentText = $(this).text();
if(currentText === "Collapse")
$(this).text("Expand");
else
$(this).text("Collapse");
/*$('.io-section-header').each(function() {
$("li").siblings(".advanced").toggle('fast',function(){});
});*/
$('.io-section-header li').siblings(".advanced").toggle('fast');
});
});
</script>
</body>
</html>
From the .each() documentation:
We can break the $.each() loop at a particular iteration by making the callback function return false. Returning non-false is the same as a continue statement in a for loop; it will skip immediately to the next iteration.
This will toggle the first advanced class in each io-section-header class
$('ul li.advanced:first', '.io-section-header').toggle('fast',function(){});
This will toggle the first advanced class in the first io-section-header class
$('ul li.advanced:first', '.io-section-header:first').toggle('fast',function(){});
return false is all you need; why aren't you using first()?