Using Javascript to Toggle CSS Display Setting - javascript

I'm trying to build a page where I can post a series of long text (in this particular case, song lyrics). I've followed the code from site doing similar things, but cant seem to make it work. any suggestions? My code is posted below.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css.css">
<script>
<!--
function toggle(ID) {
var x = document.getElementById(ID); //get lyrics element
var xdisplay = x.style.display; // get CSS display settings
//Change CSS display setting
if (xdisplay == none) {
xdisplay = "block"
}
else {
xdisplay = "none"
}
-->
</script>
</head>
<body>
<button onclick="toggle(l1)" id="lyric1">Click Here for Lyrics</button><br>
<button onclick="toggle(l2)" id="lyric2">Click Here for Lyrics</button><br>
<button onclick="toggle(l3)" id="lyric3">Click Here for Lyrics</button><br>
<p class=lyric id=l1> Lyrics 1 </p>
<p class=lyric id=l2> Lyrics 2 </p>
<p class=lyric id=l3> Lyrics 3 </p>
</body>
</html>
CSS:
.lyric {
display: none;
}

You're missing quotations all around your code.
You're not passing valid id's, you're passing variable names instead of strings.
To get a css rule that was set in css, use getComputedStyle instead of style.
To change the style, don't use the string that holds the current one, instead use the style attribute.
function toggle(ID) {
var x = document.getElementById(ID); //get lyrics element
var xdisplay = getComputedStyle(x, null).display; // get CSS display settings
//Change CSS display setting
//Change x.style.display, not xdisplay
if (xdisplay == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
.lyric {
display: none;
}
<button onclick="toggle('l1')" id="lyric1">Click Here for Lyrics</button><br> <!-- changed l1 to 'l1' -->
<button onclick="toggle('l2')" id="lyric2">Click Here for Lyrics</button><br> <!-- changed l2 to 'l2' -->
<button onclick="toggle('l3')" id="lyric3">Click Here for Lyrics</button><br> <!-- changed l3 to 'l3' -->
<p class="lyric" id="l1"> Lyrics 1 </p> <!-- changed l1 to "l1" and lyric to "lyric" -->
<p class="lyric" id="l2"> Lyrics 2 </p> <!-- changed l2 to "l2" and lyric to "lyric" -->
<p class="lyric" id="l3"> Lyrics 3 </p> <!-- changed l3 to "l3" and lyric to "lyric" -->

You are copying the value of x.style.display to xdisplay, and then setting xdisplay to other values. Instead, try:
if (xdisplay == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}

You are using wrong codes, as you missed some quotation marks and a curly bracket ,
First solve your syntax errors then , try this js code it works fine:
function toggle(ID) {
var x = document.getElementById(ID);
var xdisplay = x.getAttribute("class");
if (xdisplay) {
x.removeAttribute("class");
}
else {
x.setAttribute("class", "lyric");
}
}

Related

How to hide Elements in Javascript

I want that the text ist hidden in the beginning and after clicking the button it is displayed. I would be really greatfull if someone would find the mistake in my code.
function F1()
{
var x = document.getElementById("step1DIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<!DOCTYPE html>
<html>
<body>
<button onclick="F1()"> <b>Step 1</b> </button>
<div id="step1DIV">
<p> text </p>
</div>
</body>
</html>
You need to give it an initial style that hides it in the HTML.
function F1()
{
var x = document.getElementById("step1DIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<button onclick="F1()"> <b>Step 1</b> </button>
<div id="step1DIV" style="display: none;">
<p> text </p>
</div>
But inline styles are poor design, it's better to use a class with CSS.
function F1()
{
var x = document.getElementById("step1DIV");
x.classList.toggle("hidden");
}
.hidden {
display: none;
}
<button onclick="F1()"> <b>Step 1</b> </button>
<div id="step1DIV" class="hidden">
<p> text </p>
</div>
I just defined it as 'none' to begin with as such:
<div id="step1DIV" style="display: none">
Try to initially set the display of your step1 DIV to none. Either using inline styling or CSS.
You can also try to run your function on page load.
You want to toggle the hidden attribute defined in the HTML Standard.
function F1 () {
document.getElementById("a").toggleAttribute("hidden");
}
<!DOCTYPE html>
<html>
<body>
<button onclick="F1()"> <b>Step 1</b> </button>
<div id=a>
<p> text </p>
</div>
</body>
</html>

how to make all elements invisible in javascript?

I'm using the navigo vanilla javascript router library to make a single page application and I'm trying to implement this part.
router
.on('/products/list', function () {
// display all the products... here i need to hide and show
})
.resolve();
I thought the thing I need to do is hide and show some divs so how do i set all divs as invisible or make everything on the page invisible.
<body>
<div id="homepage">
<h1>home</h1>
</div>
<div id="ad">
<h1>advert</h1>
</div>
<div id="errorpage">
<h1>error</h1>
</div>
<div class="state">
<span class="users">?</span> online
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/navigo#7.1.2/lib/navigo.min.js"></script>
<script src="script.js"></script>
</body>
Hide DIV using id
<div id="homepage">
<h1>home</h1>
</div>
using JQuery
$('#homepage').hide();//hide
$('#homepage').show();//Show
Using Javascript
document.getElementById('homepage').style.display = 'none'; //hide
document.getElementById('homepage').style.visibility = 'hidden'; // hide
document.getElementById('homepage').style.display = 'block'; // Show
document.getElementById('homepage').style.display = 'inline'; // Show
document.getElementById('homepage').style.display = 'inline-block'; // Show
document.getElementById('homepage').style.visibility = 'visible'; // Show
If you want to hide all the div in page
Using JQuery
$('div').hide();//hide
Using Javascript
var divs = ​document.getElementsByTagName("div");​
for (var i = 0; i < divs.length; i++) {
divs[i].style.display = 'none';
}
The easiest and most efficient way would be putting the products in a container (i.e. div) and set its display (to none and block) or it's visibility, or opacity (whichever floats your boat):
<div id="products">
....
</div>
JS:
to hide:
document.GetElementById("products").style.display = "none";
to show:
document.GetElementById("products").style.display = "block";

Count and display most recent blog posts in javascript

What is the javascript in order to only display posts 3 & 4 in order???
Also I need it be dynamic so if I put a 5th post it will only display 4th and 5th posts... I was thinking about something like a date function or a simple incrementor but can't seem to figure it out. I'm new to javascript and have been trying different things but no avail... Thanks in advance...
<!DOCTYPE html>
<html>
<body>
<div id="posts-div">
<h1 class="post-title">post4</h1>
<p class="post">post4</p>
</div>
<div id="posts-div">
<h1 class="post-title">post3</h1>
<p class="post">post3</p>
</div>
<div id="posts-div">
<h1 class="post-title">post2</h1>
<p class="post">post2</p>
</div>
<div id="posts-div">
<h1 class="post-title">post1</h1>
<p class="post">post1</p>
</div>
<script>
// ???
</script>
</body>
</html>
You dont need script for that. You can do it with CSS.. I have changed your html little bit (made posts-div class in html).
.posts-div{
display:none;
}
.posts-div:nth-child(-n+2) {
display:block;
}
<!DOCTYPE html>
<html>
<body>
<div class="posts-div">
<h1 class="post-title">post5</h1>
<p class="post">post5</p>
</div>
<div class="posts-div">
<h1 class="post-title">post4</h1>
<p class="post">post4</p>
</div>
<div class="posts-div">
<h1 class="post-title">post3</h1>
<p class="post">post3</p>
</div>
<div class="posts-div">
<h1 class="post-title">post2</h1>
<p class="post">post2</p>
</div>
<div class="posts-div">
<h1 class="post-title">post1</h1>
<p class="post">post1</p>
</div>
<script>
// ???
</script>
</body>
</html>
You can test it on JSfiddle as well.. https://jsfiddle.net/nimittshah/b5eL3ykx/6/
$('.posts-div:gt(1)').hide()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<div class="posts-div">
<h1 class="post-title">post4</h1>
<p class="post">post4</p>
</div>
<div class="posts-div">
<h1 class="post-title">post3</h1>
<p class="post">post3</p>
</div>
<div class="posts-div">
<h1 class="post-title">post2</h1>
<p class="post">post2</p>
</div>
<div class="posts-div">
<h1 class="post-title">post1</h1>
<p class="post">post1</p>
</div>
</body>
Try this:
<script>
document.addEventListener("DOMContentLoaded", function () {
var allPosts = document.querySelectorAll(".posts-div");
// This is the number of posts you want displayed
var numberOfPostsToShow = 2;
for (var i = 0; i < allPosts.length; i++) {
if(i > numberOfPostsToShow - 1) {
allPosts[i].style.display = "none";
}
}
});
</script>
This way you will choose how many posts you want to be shown with the numberOfPostsToShow variable.
Let me know if this worked. Regards.
The way I interpreted your question, you need a way to:
show only the first n elements;
add new elements to the top of the list of posts, dynamically;
when you add them, update the visible elements.
Assuming a slightly modified version of your code, which corrects the id/class issue and adds a container for all the posts (this time with a proper id):
<!DOCTYPE html>
<html>
<body>
<div id="posts-container">
<div class="posts-div">
<h1 class="post-title">post4</h1>
<p class="post">post4</p>
</div>
<div class="posts-div">
<h1 class="post-title">post3</h1>
<p class="post">post3</p>
</div>
<div class="posts-div">
<h1 class="post-title">post2</h1>
<p class="post">post2</p>
</div>
<div class="posts-div">
<h1 class="post-title">post1</h1>
<p class="post">post1</p>
</div>
</div>
<script>
// ???
</script>
</body>
</html>
this code will do the trick and manage both the addition and the updates to the visibility of the posts:
function showOnly(visible, query){
var elements = document.querySelectorAll(query);
for (var i = 0; i < elements.length; i++){
if (i < visible - 1){
elements[i].style.display = 'block';
} else {
elements[i].style.display = 'none';
}
}
}
function publishPost(element, visible){
showOnly(visible, '#posts-container .posts-div')
var elements = document.querySelectorAll('#posts-container .posts-div');
element.style.display = 'block';
if (elements.length > 0) {
document.querySelector('#posts-container').insertBefore(element, elements[0]);
} else {
document.querySelector('#posts-container').appendChild(element);
}
}
The showOnly function (to be called with the number of elements to be shown and the string that identifies the elements with querySelectorAll) will only make visible the first n elements identified by the string. You can use it independently of the rest of the code if needed.
The publishPost function, on the other hand, is strictly dependent on the modified html above (to use it elsewhere you will need to adjust the strings fed to querySelector and querySelectorAll). It takes the element to be published as the first argument, the number of elements that need to be visible as the second. Then it updates the list of posts prepending the new one to it, and it also updates which posts are visible.
This is a code sample that uses it:
var elDiv = document.createElement('div');
var elH1 = document.createElement('h1');
var elP = document.createElement('p');
elDiv.classList = 'posts-div';
elH1.classList = 'post-title';
elP.classList = 'post';
elH1.innerText = 'some title';
elP.innerText = 'some text for the post';
elDiv.appendChild(elH1).appendChild(elP);
publishPost(elDiv, 2);
showOnly
This function starts by getting a list of the elements whose visibility must be managed:
var elements = document.querySelectorAll(query);
then it loops through the list and examines each element:
for (var i = 0; i < elements.length; i++){
if it has to be visible, it sets the style.display property to 'block':
if (i < visible){
elements[i].style.display = 'block';
otherwise it sets it to 'hidden':
else {
elements[i].style.display = 'none';
publishPost
This function starts by showing only n-1 elements (because it will need to add a new, visible element to the top of the list):
showOnly(visible - 1, '#posts-container .posts-div')
then it retrieve the current posts:
var elements = document.querySelector('#posts-container .posts-div');
it makes the new element visible:
element.style.display = 'block';
finally, it adds the element to the top of the list (the different syntax depends on wether the list is empty):
if (elements.length > 0) {
document.querySelector('#posts-container').insertBefore(element, elements[0]);
} else {
document.querySelector('#posts-container').appendChild(element);
}

How to inactivate parts of html code by Javascript

A JS newbie question:
I would like to inactivate a part of a html code (which I manually would do by <!-- ... -->) by Javascript, depending on a numeric variable (which I extract from the file name): If var > 10 do inactivate the code.
EDITED:
If possible only simple Javascript!
A demo html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script>
var param = 10;
</script>
</head>
<body>
<p>Paragraph One</p>
<p>Beginning of the part to be removed if param > 10</p>
E-Mail<br><br>
This is simply something other.
Etc.
Etc.
<p>End of the part to be removed</p>
<p>Paragraph Ten</p>
</body>
</html>
Put everything you want to remove/hide inside one div with a specific class or id, then add an if condition and hide or remove the required div once the condition is true.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
</head>
<body>
<p>Paragraph One</p>
<div id="to_remove">
<p>Beginning of the part to be removed</p>
E-Mail<br><br>
This is simply something other.
Etc.
Etc.
<p>End of the part to be removed</p>
</div>
<p>Paragraph Ten</p>
<script type="text/javascript">
var param = 11;
if(param >10) document.getElementById("to_remove").remove();
//OR if you want to show the div later use this:
//if(param>10) document.getElementById("to_remove").style.display = 'none';
</script>
</body>
</html>
You can remove the elements from the DOM, e.g. by using removeChild():
document.getElementById('div').removeChild(document.getElementById('p2'));
<div id="div">
<p id="p1">Paragraph one</p>
<p id="p2">Paragraph two</p>
</div>
You can use css property for the same, add two classes active and inactive with css .active{display:block} and .inactive{display:none}.now you can use jquery to add and remove active and inactive classes according to your condition.like in jquery you can write
if(var > 10){
$("div").addClass('inactive');
}else{
$("div").removeClass('inactive');
}
A CSS + jQuery way of achieving this could be by adding the class disabled:
if(condition) {
var element = document.getElementByID('#sample_ID');
element.addClass("disabled");
}
This is assuming that you contain the code to be disabled in the <div id="sample_ID">
If you just want to hide it, you can do this by using CSS.
E.g. to hide <div id="myDiv">Bla</div> you'd use this:
var element = document.getElementById("myDiv");
element.style.display = "none";
And if you want to show it again at some point:
element.style.display = "block";
Live example:
function hideDiv() {
var element = document.getElementById("myDiv");
element.style.display = "none";
}
function showDiv() {
var element = document.getElementById("myDiv");
element.style.display = "block";
}
#myDiv {
border: solid 1px green
}
<button onclick="hideDiv()">Hide</button>
<button onclick="showDiv()">Show</button>
<br/>
<div id="myDiv">Bla</div>

How to prevent duplicates when I append to a list?

I want to modify the below code so that selected_users remains unique after append. That is, let's append a user U to selected_users only if selected_users does not already contain a U.
The below code you can copy and paste and it will work. All dependencies are on cdns.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<style>
div { width : 200px }
.selected { background-color:blue; }
</style>
<script>
$(document).ready(function() {
$("#add").on("click", function() {
var users = $("#users > p.selected");
var selected_users = $("#selected_users");
selected_users.append(users.clone().removeClass("selected"));
});
$("#remove").on("click", function() {
var selected_users = $("#selected_users > p");
selected_users.remove();
});
$("p").click(function() {
if( $(this).hasClass("selected") ) {
$(this).removeClass("selected");
}
else {
$(this).addClass("selected");
}
});
});
</script>
</head>
<div id="users">
<p class="1">User 1</p>
<p class="2">User 2</p>
<p class="3">User 3</p>
<p class="4">User 4</p>
<p class="5">User 5</p>
</div>
<div>
<input type="button" value=">>" id="add"/>
<input type="button" value="<<" id="remove"/>
</div>
<div id="selected_users">
</div>
You could do something like this:
$("#add").on("click", function()
{
var users = $("#users > p.selected");
var selected_users = $("#selected_users");
if(!selected_users.find(users).lenght())
{
selected_users.append(users.clone().removeClass("selected"));
}
});
Forms like this commonly remove the item from the source list when adding it to the target list.
This sort of behavior would prevent the need to do the check, as it would be impossible to add the duplicate to your selected_users list.
Your code would look something like this for selecting/deselecting a user:
$("#add").on("click", function() {
var users = $("#users > p.selected");
var selected_users = $("#selected_users");
selected_users.append(users.clone().removeClass("selected"));
users.remove();
});
$("#remove").on("click", function() {
var selected_users = $("#selected_users > p");
var users = $("#users");
users.append(selected_users.clone());
selected_users.remove();
});
NOTE: I have not tested the above code.
If you wanted to maintain the order of users in each of your list, you could do a sort on either list when adding to it, or you could maintain the visibility property of each user rather than actually removing/adding them from either list.
Simple solution is to remove form the list on the left hand side.
If you don;t want to do that. Try this. The idea is to assign ids to be able to check.
$("#add").on("click", function() {
var users = $("#users > p.selected");
users.uniqueId();//assigns unique id if they don't have one
//you can do above step somewhere else also for performance reasons
var selected_users = $("#selected_users");
selected_users.append(users.clone().removeClass("selected"));
users.each(function(user) {
var id = user.attr('id');
var exists = $("#selected_users > [selectedid="+id+"]);
if (! exists || exists.length <= 0 ) {
selected_users.append(
user.removeClass("selected").
removeAttr("id").
attr('selectedid',id));
}
});
});

Categories

Resources