show/hide div using javascript

show/hide div using javascript - javascript

I have two divs, one is hidden and the other one is visible. I'm using css display:none; to hide first and using style.display="block";
when I refresh the page it gives same div name in the address bar but the div is hidden.
I just want the div to stay block after refreshing or submitting the form inside the div
<html>
<head>
<meta charset="utf-8">
<title>Sample</title>
<style>
#content {
flex:8;
display:flex;
flex-direction:row;
justify-content:space-between;
flex-basis:100%;
padding:0 10px 0x 10px;
text-align:center;
}
#leftnav {
flex:1;
padding-top:20px;
}
#midcontent {
flex:9;
text-align:center;
padding-top:20px;
display:block;
}
#leftnav ul {
display: block;
margin: 0px;
padding: 0px;
list-style-type: none;
}
#m1,#m2,#m3 {
flex:9;
text-align:center;
padding-top:20px;
display:none;
}
</style>
</head>
<body>
<div id="content">
<div id="leftnav" align="center">
<ul>
<li>Page m1</li>
<li>Page m2</li>
<li>Page m3</li>
</ul>
</div>
<div id="midcontent" align="center">
<p>Home Page</p>
</div>
<div id="m1" align="center">
<p>Div m1</p>
</div>
<div id="m2" align="center">
<p>Div m2</p>
</div>
<div id="m3" align="center">
<p>Div m3</p>
</div>
</div>
<script type="text/javascript">
var d=document.getElementById('midcontent');
var d1=document.getElementById('m1');
var d2=document.getElementById('m2');
var d3=document.getElementById('m3');
function div1() {
if(d.style.display === "block") {
d.style.display = "none";
d1.style.display = "block";
} else {
d.style.display = "none";
d1.style.display = "block";
d2.style.display = "none";
d3.style.display = "none";
}
}
function div2() {
if(d.style.display === "block") {
d.style.display = "none";
d2.style.display = "block";
} else {
d.style.display = "none";
d1.style.display = "none";
d2.style.display = "block";
d3.style.display = "none";
}
}
function div3() {
if(d.style.display === "block") {
d.style.display = "none";
d3.style.display = "block";
} else {
d.style.display = "none";
d1.style.display = "none";
d2.style.display = "none";
d3.style.display = "block";
}
}
</script>
</body>
</html>

change:
function div1() {
var d=document.getElementById('midcontent');
var d1=document.getElementById('m1');
if(d.style.display === "block") {
d.style.display = "none";
d1.style.display = "block";
} else {
d.style.display = "none";
d1.style.display = "block";
}
}
to:
function toggleDiv() {
document.getElementById('midcontent').style.display = "none";
document.getElementById('m1').style.display = "block";
}
"i just want the div to stay block after refreshing" call the function on page load in html to make it execute after refresh of page:
<body onLoad="toggleDiv()">
<!-- Your html content -->
</body>
alternatively you can also do it in js:
document.addEventListener("DOMContentLoaded", function(event) {
// Your code to run since DOM is loaded and ready
toggleDiv()
});
If you want more in depth persistance and/or variable changes please provide additional information on how and why you want to do this exactly! Hope it helps! :)

Related

Text doesn't appear when outputting it on HTML

I've been working on a notebook web app, my problem is that if I write a note and save it, when I press on its title to read it again it just shows me an empty screen. Here is the code for the app:
const main = document.getElementById("main");
const add = document.getElementById("add"); //new note
const submit = document.getElementById("submit"); //submit the new note
const cancel = document.getElementById("cancel");
const screen = document.getElementById("screen");
const ul = document.getElementById("list");
const del = document.getElementById("delete");
const note = document.getElementById("note");
const back = document.getElementById("back");
const noteTitle = document.getElementById("note-title");
const inputTitle = document.getElementById("input-title");
const err1 = document.getElementById("err1");
const err2 = document.getElementById("err2");
const err3 = document.getElementById("err3");
const text = document.getElementById("text");
let flag1 = false;
let flag2 = false;
let flag3 = false;
let mynotes = {};
let i = 1;
add.addEventListener('click', function(){
main.style.display = "block";
submit.style.display = "inline";
cancel.style.display = "inline";
add.style.display = "none";
screen.style.display = "none";
del.style.display = "none";
back.style.display = "none";
inputTitle.style.display = "block"
});
submit.addEventListener('click', function(){
title = noteTitle.value;
newNote = note.value;
if (title.length < 3){
err1.style.display = "block";
flag1 = true;
} else {
err1.style.display = "none";
flag1 = false
}
if (newNote === ""){
err2.style.display = "block";
flag2 = true;
} else {
err2.style.display = "none";
flag2 = false;
}
if (mynotes.hasOwnProperty(title)){
err3.style.display = "block";
flag3 = true;
} else {
err3.style.display = "none";
flag3 = false;
}
if (!flag1 && !flag2 && !flag3) {
newNote = newNote.replace(/\n/g, "<br>");
mynotes[title] = newNote;
var li = document.createElement("li");
li.setAttribute('class','item');
li.appendChild(document.createTextNode(title));
ul.appendChild(li);
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
cancel.style.display = "none";
add.style.display = "inline";
del.style.display = "none";
back.style.display = "none";
inputTitle.style.display = "none";
note.value = "";
noteTitle.value = "";
}
});
ul.addEventListener('click', function(event){
node = event.target;
item = event.target.textContent;
text.innerHTML = mynotes[item];
fullnote.style.display = "block";
main.style.display = "none";
submit.style.display = "none";
add.style.display = "none";
screen.style.display = "none";
cancel.style.display = "none";
del.style.display = "inline";
back.style.display = "inline";
inputTitle.style.display = "none";
});
del.addEventListener('click', function(){
ul.removeChild(node);
delete mynotes[item];
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
add.style.display = "inline";
fullnote.style.display = "none";
back.style.display = "none";
del.style.display = "none";
inputTitle.style.display = "none";
});
cancel.addEventListener('click', function(){
note.value = "";
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
add.style.display = "inline";
fullnote.style.display = "none";
del.style.display = "none";
back.style.display = "none";
cancel.style.display = "none";
inputTitle.style.display = "none";
});
back.addEventListener('click', function(){
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
add.style.display = "inline";
fullnote.style.display = "none";
back.style.display = "none";
del.style.display = "none";
inputTitle.style.display = "none";
});
#container {
background-color: rgb(253, 248, 177);
}
#header, #footer {
z-index: 2;
width: 100%;
position: fixed;
}
#footer {
bottom: 0;
}
#screen, #input-title {
margin-top: 2em;
}
#title {
color: white;
padding-top: 7px;
}
#cancel, #submit, #back {
color: white;
font-size: 20px;
}
#add {
font-size: 20px;
}
#delete, #cancel, #submit {
display: none;
}
#input-title {
display: none;
}
#main {
display: none;
}
#note {
resize: none;
}
#fullnote {
display: none;
}
#back {
display: none;
}
#err1 {
color: red;
font-size: 12px;
font-weight: bold;
display: none;
}
#err2 {
color: red;
font-size: 12px;
font-weight: bold;
display: none;
}
#err3 {
color: red;
font-size: 12px;
font-weight: bold;
display: none;
}
<!doctype html>
<html lang="en">
<head>
<!-- link to css -->
<link rel="stylesheet" href="style.css">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<title>Notebook</title>
</head>
<body>
<div class="container min-vh-100 d-flex flex-column" id="container">
<!-- header -->
<div class="row align-items-start bg-info container" id="header">
<div class="col text-center">
<button type="button" class="btn" id="cancel">✗</button>
<button type="button" class="btn" id="back">↩</button>
</div>
<div class="col text-center">
<h4 id="title">Notebook</h4>
</div>
<div class="col text-center">
<button type="button" class="btn" id="submit">✔</button>
</div>
</div>
<br />
<!-- Screen list show -->
<div class="row" id="screen">
<div class="col-12">
<ul id="list">
</ul>
</div>
</div>
<!-- Note show -->
<div class="row" id="fullnote">
<div class="col-12">
<p id="text">
</p>
</div>
</div>
<!-- input for note title -->
<div class="row" id="input-title">
<div class="col">
<input type="text" maxlength="20" class="form-control" placeholder="Note title" value="" id="note-title">
<p id="err1">Title must be at least 3 characters</p>
<p id="err3">There is a note with this title</p>
</div>
</div>
<br />
<!-- textarea for writing note -->
<div class="row flex-grow-1">
<div class="col" id="main">
<textarea class="form-control textarea h-100" value="" placeholder="write note" id="note"></textarea>
<p id="err2">Note can not be empty</p>
</div>
</div>
<br />
<!-- footer -->
<div class="row align-items-end container" id="footer">
<div class="col d-flex justify-content-start" style="padding: 10px; padding-left: 25px;">
<button id="add" class="btn btn-info rounded-circle"><h4 style="padding: 0px; margin: 0px;">+</h4></button>
<button id="delete" class="btn btn-info rounded-circle">🗑</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Steps to recreate the issue:
Try to add a note, save it, and press on it's title to read the note and you'll understand what I mean.

The problem was in your <p id="text"> tag. It was hidden behind the blue header. Just used a couple of <br> and it is visible now.
const main = document.getElementById("main");
const add = document.getElementById("add"); //new note
const submit = document.getElementById("submit"); //submit the new note
const cancel = document.getElementById("cancel");
const screen = document.getElementById("screen");
const ul = document.getElementById("list");
const del = document.getElementById("delete");
const note = document.getElementById("note");
const back = document.getElementById("back");
const noteTitle = document.getElementById("note-title");
const inputTitle = document.getElementById("input-title");
const err1 = document.getElementById("err1");
const err2 = document.getElementById("err2");
const err3 = document.getElementById("err3");
const text = document.getElementById("text");
let flag1 = false;
let flag2 = false;
let flag3 = false;
let mynotes = {};
let i = 1;
add.addEventListener('click', function(){
main.style.display = "block";
submit.style.display = "inline";
cancel.style.display = "inline";
add.style.display = "none";
screen.style.display = "none";
del.style.display = "none";
back.style.display = "none";
inputTitle.style.display = "block"
});
submit.addEventListener('click', function(){
title = noteTitle.value;
newNote = note.value;
if (title.length < 3){
err1.style.display = "block";
flag1 = true;
} else {
err1.style.display = "none";
flag1 = false
}
if (newNote === ""){
err2.style.display = "block";
flag2 = true;
} else {
err2.style.display = "none";
flag2 = false;
}
if (mynotes.hasOwnProperty(title)){
err3.style.display = "block";
flag3 = true;
} else {
err3.style.display = "none";
flag3 = false;
}
if (!flag1 && !flag2 && !flag3) {
newNote = newNote.replace(/\n/g, "<br>");
mynotes[title] = newNote;
var li = document.createElement("li");
li.setAttribute('class','item');
li.appendChild(document.createTextNode(title));
ul.appendChild(li);
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
cancel.style.display = "none";
add.style.display = "inline";
del.style.display = "none";
back.style.display = "none";
inputTitle.style.display = "none";
note.value = "";
noteTitle.value = "";
}
});
ul.addEventListener('click', function(event){
node = event.target;
item = event.target.textContent;
console.log(mynotes[item])
text.innerHTML = mynotes[item];
fullnote.style.display = "block";
main.style.display = "none";
submit.style.display = "none";
add.style.display = "none";
screen.style.display = "none";
cancel.style.display = "none";
del.style.display = "inline";
back.style.display = "inline";
inputTitle.style.display = "none";
});
del.addEventListener('click', function(){
ul.removeChild(node);
delete mynotes[item];
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
add.style.display = "inline";
fullnote.style.display = "none";
back.style.display = "none";
del.style.display = "none";
inputTitle.style.display = "none";
});
cancel.addEventListener('click', function(){
note.value = "";
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
add.style.display = "inline";
fullnote.style.display = "none";
del.style.display = "none";
back.style.display = "none";
cancel.style.display = "none";
inputTitle.style.display = "none";
});
back.addEventListener('click', function(){
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
add.style.display = "inline";
fullnote.style.display = "none";
back.style.display = "none";
del.style.display = "none";
inputTitle.style.display = "none";
});
#container {
background-color: rgb(253, 248, 177);
}
#header, #footer {
z-index: 2;
width: 100%;
position: fixed;
}
#footer {
bottom: 0;
}
#screen, #input-title {
margin-top: 2em;
}
#title {
color: white;
padding-top: 7px;
}
#cancel, #submit, #back {
color: white;
font-size: 20px;
}
#add {
font-size: 20px;
}
#delete, #cancel, #submit {
display: none;
}
#input-title {
display: none;
}
#main {
display: none;
}
#note {
resize: none;
}
#fullnote {
display: none;
}
#back {
display: none;
}
#err1 {
color: red;
font-size: 12px;
font-weight: bold;
display: none;
}
#err2 {
color: red;
font-size: 12px;
font-weight: bold;
display: none;
}
#err3 {
color: red;
font-size: 12px;
font-weight: bold;
display: none;
}
<!doctype html>
<html lang="en">
<head>
<!-- link to css -->
<link rel="stylesheet" href="style.css">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<title>Notebook</title>
</head>
<body>
<div class="container min-vh-100 d-flex flex-column" id="container">
<!-- header -->
<div class="row align-items-start bg-info container" id="header">
<div class="col text-center">
<button type="button" class="btn" id="cancel">✗</button>
<button type="button" class="btn" id="back">↩</button>
</div>
<div class="col text-center">
<h4 id="title">Notebook</h4>
</div>
<div class="col text-center">
<button type="button" class="btn" id="submit">✔</button>
</div>
</div>
<br />
<!-- Screen list show -->
<div class="row" id="screen">
<div class="col-12">
<ul id="list">
</ul>
</div>
</div>
<!-- Note show -->
<div class="row" id="fullnote">
<div class="col-12">
<br><br>
<p id="text">
</p>
</div>
</div>
<!-- input for note title -->
<div class="row" id="input-title">
<div class="col">
<input type="text" maxlength="20" class="form-control" placeholder="Note title" value="" id="note-title">
<p id="err1">Title must be at least 3 characters</p>
<p id="err3">There is a note with this title</p>
</div>
</div>
<br />
<!-- textarea for writing note -->
<div class="row flex-grow-1">
<div class="col" id="main">
<textarea class="form-control textarea h-100" value="" placeholder="write note" id="note"></textarea>
<p id="err2">Note can not be empty</p>
</div>
</div>
<br />
<!-- footer -->
<div class="row align-items-end container" id="footer">
<div class="col d-flex justify-content-start" style="padding: 10px; padding-left: 25px;">
<button id="add" class="btn btn-info rounded-circle"><h4 style="padding: 0px; margin: 0px;">+</h4></button>
<button id="delete" class="btn btn-info rounded-circle">🗑</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

The problem is that the note text is under the header.
Add some margin to the note text section
#fullnote {
margin-top: 50px;
}

It's actually working exactly as you expect. The problem isn't that the full text of the note isn't being displayed, it is that your fullnote element has not been pushed down (margin-top, most likely), placing it directly behind the #header div.
I would suggest strongly that you use the Chrome Developer Tools (or if you're on another platform, their dev tools). It will allow you to see if there are javascript errors, and also to poke around in the DOM structure itself. By doing this, I could see the #fullnote, and that it did, in fact, contain the text of the note as you'd wanted.

The fullnote element is actually hidden by green bar
Change CSS to
#fullnote {
margin-top: 25px;
display: none;
}

textarea value property ignore the linebreaks and whitespaces when read it with javascript

I've been working on a small notebook app that works on the browser, my problem is that if i typed a note like this:
*hello
this is my first note
the app show it like this:
hello this is my first note
I also want the elements with id's of header and footer to be shown even when i scroll down or up (sth like setting posiotion to fixed but this doesn't work for me).
here is a link to the project to see the codes and try it. Codepen

you have to replace linebreaks and whitespaces with html like
note.value.replace(/\n/g, '<br>\n').replace(/\s/g,' ');
and add it to the innerHTML of the <li> instead of creating a textnode.
li.innerHTML = show;
Take a look at my example:
const main = document.getElementById("main");
const add = document.getElementById("add"); //new note
const submit = document.getElementById("submit"); //submit the new note
const cancel = document.getElementById("cancel");
const screen = document.getElementById("screen");
const ul = document.getElementById("list");
const del = document.getElementById("delete");
const note = document.getElementById("note");
const back = document.getElementById("back");
let mynotes = {};
let i = 0;
add.addEventListener('click', function() {
main.style.display = "block";
submit.style.display = "inline";
cancel.style.display = "inline";
add.style.display = "none";
screen.style.display = "none";
del.style.display = "none";
back.style.display = "none";
});
submit.addEventListener('click', function() {
if (note.value) {
newNote = note.value.replace(/\n/g, '<br>\n').replace(/\s/g,' ');
if (newNote.length > 50) {
show = newNote.substring(0, 46) + "...";
} else {
show = newNote;
}
if (mynotes.hasOwnProperty(show)) {
show = show + `${++i}`;
}
mynotes[show] = newNote;
var li = document.createElement("li");
li.setAttribute('class', 'item');
li.innerHTML = show;
ul.appendChild(li);
note.value = "";
} else {
alert("can't add empty note");
}
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
cancel.style.display = "none";
add.style.display = "inline";
del.style.display = "none";
back.style.display = "none";
});
ul.addEventListener('click', function(event) {
node = event.target;
item = event.target.innerHTML;
text.innerHTML = mynotes[item];
fullnote.style.display = "block";
main.style.display = "none";
submit.style.display = "none";
add.style.display = "none";
screen.style.display = "none";
cancel.style.display = "none";
del.style.display = "inline";
back.style.display = "inline";
});
del.addEventListener('click', function() {
ul.removeChild(node);
delete mynotes[item];
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
add.style.display = "inline";
fullnote.style.display = "none";
back.style.display = "none";
del.style.display = "none";
});
cancel.addEventListener('click', function() {
note.value = "";
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
add.style.display = "inline";
fullnote.style.display = "none";
del.style.display = "none";
back.style.display = "none";
cancel.style.display = "none";
})
back.addEventListener('click', function() {
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
add.style.display = "inline";
fullnote.style.display = "none";
back.style.display = "none";
del.style.display = "none";
});
#container {
background-color: rgb(253, 248, 177);
}
#header,
#footer {
z-index: 2;
}
#title {
color: white;
padding-top: 7px;
}
#cancel,
#submit,
#back {
color: white;
font-size: 20px;
}
#add {
font-size: 20px;
}
#delete,
#cancel,
#submit {
display: none;
}
#main {
display: none;
}
#note {
resize: none;
}
#fullnote {
display: none;
}
#back {
display: none;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div class="container min-vh-100 d-flex flex-column" id="container">
<!-- header -->
<div class="row align-items-start bg-info" id="header">
<div class="col text-center">
<button type="button" class="btn" id="cancel">✗</button>
<button type="button" class="btn" id="back">↩</button>
</div>
<div class="col text-center">
<h4 id="title">Notebook</h4>
</div>
<div class="col text-center">
<button type="button" class="btn" id="submit">✔</button>
</div>
</div>
<br />
<!-- Screen list show -->
<div class="row" id="screen">
<div class="col-12">
<ul id="list">
</ul>
</div>
</div>
<!-- Note show -->
<div class="row" id="fullnote">
<div class="col-12">
<p id="text">
</p>
</div>
</div>
<!-- textarea -->
<div class="row flex-grow-1">
<div class="col" id="main">
<textarea class="form-control textarea h-100" value="" placeholder="write note" id="note"></textarea>
</div>
</div>
<!-- footer -->
<div class="row align-items-end" id="footer">
<div class="col d-flex justify-content-start" style="padding: 10px; padding-left: 25px;">
<button id="add" class="btn btn-info rounded-circle"><h4 style="padding: 0px; margin: 0px;">+</h4></button>
<button id="delete" class="btn btn-info rounded-circle">🗑</button>
</div>
</div>
</div>

You either have to convert the newlines to br's:
str = str.replace(/(?:\r\n|\r|\n)/g, '<br>');
Or you can do this with css:
.text, .item {
white-space: pre-wrap;
}

Show/Hide Javascript one at a time

This is probably very simple but I'm at a loss.
I have two anchors that toggle the display of their own div containers. Right now, you can have both div containers showing by clicking each button once. I would like only one div showing at a time.
So if you select button 1 to show div 1, then you select button 2, it will show div 2 but also hide div 1.
Here is my code:
<script type="text/javascript" language="JavaScript">
function ReverseDisplay(d)
{
if(document.getElementById(d).style.display == "none")
{ document.getElementById(d).style.display = "block"; }
else
{ document.getElementById(d).style.display = "none"; }
}
</script>
<a id="menus" href="javascript:ReverseDisplay('menuList')">Button 1</a>
<a id="reso" href="javascript:ReverseDisplay('resoList')">Button 2</a>
<p>Some content</p>
<div id="menuList" style="display:none;">Some content</div>
<div id="resoList" style="display:none;">Some content</div>

Give div's common class
<div id="menuList" class="content" style="display:none;">Some content 1</div>
<div id="resoList" class="content" style="display:none;">Some content 2</div>
And then hide all before showing specific:
function ReverseDisplay(d) {
[].slice.call(document.querySelectorAll('.content')).forEach(function(el) {
el.style.display = 'none';
});
var element = document.getElementById(d);
element.style.display = element.style.display == "none" ? "block" : "none";
}
Check the demo below.
function ReverseDisplay(d) {
[].slice.call(document.querySelectorAll('.content')).forEach(function(el) {
el.style.display = 'none';
});
var element = document.getElementById(d);
element.style.display = element.style.display == "none" ? "block" : "none";
}
.content {
padding: 10px;
background: #EEE;
}
<a id="menus" href="javascript:ReverseDisplay('menuList')">Button 1</a>
<a id="reso" href="javascript:ReverseDisplay('resoList')">Button 2</a>
<p>Some content</p>
<div id="menuList" class="content" style="display:none;">Some content 1</div>
<div id="resoList" class="content" style="display:none;">Some content 2</div>

A bit more digging and I found a solution:
<script type="text/javascript" language="JavaScript">
(function() {
var opened_element = null;
window.ReverseDisplay = function(d) {
var e = document.getElementById(d);
if (opened_element && opened_element !== e) {
opened_element.style.display = 'none';
}
if(e.style.display == 'block') {
e.style.display = 'none';
}
else {
e.style.display = 'block';
}
opened_element = e;
};
}());</script>

You could
function ReverseDisplay(d) {
var el = document.getElementById(d),
els = document.getElementsByClassName('list'),
c;
for (var i = 0; i < els.length; i++) {
c = els[i];
if (el == c) {
if (el.style.display == "block") {
el.style.display = "none";
} else {
el.style.display = "block";
}
} else {
c.style.display = "none";
}
}
}
.list {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="menus" href="javascript:ReverseDisplay('menuList')">Button 1</a>
<a id="reso" href="javascript:ReverseDisplay('resoList')">Button 2</a>
<p>Some content</p>
<div id="menuList" class="list">Some content 1</div>
<div id="resoList" class="list">Some content 2</div>

Here is jQuery for those that could use this:
function hideTarget(elem){
$(elem).hide();
}
function showTarget(elem, target, hideThis){
$(elem).click(function(){
$(target).show();
hideTarget(hideThis);
});
}
showTarget('#reso','#resoList','#menuList');
showTarget('#menus','#menuList','#resoList');
Here is the fiddle.

entire page moves up when i click menu bottom tag

the following code works fine
ERROR
- when i click the last tag in menu the entire page move to top how to resolve the error
HTML
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<title>Blueprint: Vertical Icon Menu</title>
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/leftmenu.css" />
<link rel="stylesheet" type="text/css" href="flaticon.css" />
<style>
body {position: relative;font-family: 'Lato', Calibri, Arial, sans-serif; color: #47a3da;}
body, html { font-size: 100%; height: 100%; padding: 0; margin: 0;}
a {text-decoration: none;}
a:hover {color: #000;}
#header{height: 90px;width: 100%;background-color: #B9F5BB;}
#footer{height: 50px;width: 100%;background-color: #FDD5CB;}
.dis123{width:75%;float:left; height: 500px;background-color:#DCEEE3; text-align: left; }
.postleftmen{width:25%;float:left;color:#f0f0f0;}
div.subcte456{color: red;}
</style>
</head>
<body>
<div id="header">
Head
</div>
<div class="postleftmen">
<ul class="cbp-vimenu">
<li><a href="#" >select category</a></li>
<li>mobile</li>
<li>electronics & computer</li>
<li>vehicle</li>
<li>home & furniture</li>
<li>pets</li>
<li>books, cd & hobbies</li>
<li>clothing & accessories</li>
<li>kids & baby</li>
<li>sport & health</li>
<li>service</li>
<li>jobs</li>
<li>real estate</li>
</ul>
</div>
<div class="dis123" style="text-transform: uppercase;">
<div class="subcte456" style="position:fixed;width:75%;height:60%;background-color: #FDD5CB;margin:0 auto;">
sanoj
<div id="mobi" style="display:none;z-index:99;" class="answer_list" >mobile phones</div>
<div id="elec" style="display:none;z-index:99;" class="answer_list" >electronics</div>
<div id="vehi" style="display:none;z-index:99;" class="answer_list" >vehicles</div>
<div id="home" style="display:none;z-index:99;" class="answer_list" >home</div>
<div id="pets" style="display:none;z-index:99;" class="answer_list" >pets</div>
<div id="book" style="display:none;z-index:99;" class="answer_list" >books</div>
<div id="clot" style="display:none;z-index:99;" class="answer_list" >clothing</div>
<div id="kids" style="display:none;z-index:99;" class="answer_list" >kids</div>
<div id="spor" style="display:none;z-index:99;" class="answer_list" >sport</div>
<div id="serv" style="display:none;z-index:99;" class="answer_list" >service</div>
<div id="jobs" style="display:none;z-index:99;" class="answer_list" >jobs</div>
<div id="real" style="display:none;z-index:99;" class="answer_list" >real estate</div>
</div></div>
<div style="clear:both"> </div>
<div id="footer">
Footer
</div>
<script>
function mob() {
hidemenus();
document.getElementById('mobi').style.display = "block";
}
function ele() {
hidemenus();
document.getElementById('elec').style.display = "block";
}
function veh() {
hidemenus();
document.getElementById('vehi').style.display = "block";
}
function hme() {
hidemenus();
document.getElementById('home').style.display = "block";
}
function pet() {
hidemenus();
document.getElementById('pets').style.display = "block";
}
function bok() {
hidemenus();
document.getElementById('book').style.display = "block";
}
function clo() {
hidemenus();
document.getElementById('clot').style.display = "block";
}
function kid() {
hidemenus();
document.getElementById('kids').style.display = "block";
}
function spo() {
hidemenus();
document.getElementById('spor').style.display = "block";
}
function ser() {
hidemenus();
document.getElementById('serv').style.display = "block";
}
function job() {
hidemenus();
document.getElementById('jobs').style.display = "block";
}
function rel() {
hidemenus();
document.getElementById('real').style.display = "block";
}
function hidemenus() {
document.getElementById('mobi').style.display = "none";
document.getElementById('elec').style.display = "none";
document.getElementById('vehi').style.display = "none";
document.getElementById('home').style.display = "none";
document.getElementById('pets').style.display = "none";
document.getElementById('book').style.display = "none";
document.getElementById('clot').style.display = "none";
document.getElementById('kids').style.display = "none";
document.getElementById('spor').style.display = "none";
document.getElementById('serv').style.display = "none";
document.getElementById('jobs').style.display = "none";
document.getElementById('real').style.display = "none";
}
</script>
</body>
</html>
WHAT I NEED IS
when i click the last one in menu it should display the result without moving to top of the page ORDo i need create scroll bar for menu

In short:
real estate
function rel() {
hidemenus();
document.getElementById('real').style.display = "block";
return false; // <-- will prevent the anchor # link from trigerring
}
And repeat for all your links and functions

And alternative (and IMO better) answer.
The return false method is not W3C compliant (as in it's undocumented), but it's been working this way for ages so we do it. The "Proper" way is to use the event object:
real estate
Javascript:
function rel(event) {
event.preventDefault(); // This prevents the a tag (link) to act as like a link, which would no
hidemenus();
document.getElementById('real').style.display = "block";
}
And actually there is a little bit of optimization you can perform here:
real estate
function showmenu(event) {
event.preventDefault(); // This prevents the a tag (link) to act as like a link, which would no
hidemenus();
document.getElementById(event.target.getAttribute("data-menu")).style.display = "block";
}
// This works for IE9 and above
function hidemenus() {
var elements = document.getElementsByClassName("answer_list");
for (var i in elements) {
if (elements[i] instanceof HTMLElement) {
elements[i].style.display = "none";
}
}
}
This way, we don't need to define a separate click handler for each link. Note that event.target is the HTMLElement object that the user clicked on, which in this case is the link.
The hidemenus() function I provided also removes a need to have hardcoded functionality. The reason for the elements[i] instanceof HTMLElement check is because getElementsByClassName sometimes throws in the length of the array in there, which will break the code.
Fiddle with full code: http://jsfiddle.net/g4qvtod2/1/
An even more advanced way to do this is to attach event listeners to the link dynamically using addEventListener, you may attempt that as an exercise.

Toggling multiple divs with one link Javascript

so, ive got 2 divs, one which is visible from start, and the other is hidden. Im trying to work out the action so that when i click a single link, the first div disappears and the second appears, and to reverse on second click. I have some knowledge of javascript, but zero knowledge of Jquery and those were the only questions i could find on here.
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleContent");
var text = document.getElementById("displayContent");
if(ele.style.display == "block") {
ele.style.display = "none;
text.innerHTML = "blog posts";
}
else {
ele.style.display = "block";
text.innerHTML = "hide posts";
}
}
</script>
this is what i have so far, which works for one div, but i dont know how to change this to work for 2 divs through the same link

You are missing a quote, add a second quote like below:
ele.style.display = "none";

Use a class rather than an ID.
<style type="css/stylesheet">
#div1 {
width:200px;
height:100px;
background:green;
}
#div2 {
width:200px;
height:100px;
background:red;
}
.toggle {
display:none;
}
</style>
<div id="menu">Toggle
</div>
<div id="div1" class="toggle">
<p class="displayContent">I'm some content 1</p>
</div>
<div id="div2" class="toggle">
<p class="displayContent">I'm some content 2</p>
</div>
<script language="javascript">
var a = document.getElementById("link");
a.onclick = function () {
var ele = document.getElementsByClassName("toggle");
for (var i = 0; i < ele.length; i++) {
var item = ele[i];
if (item.style.display == "block") {
item.style.display = "none";
} else {
item.style.display = "block";
item.innerHtml = "some content from " + i;
}
}
};
</script>
Here is the JSFiddle solution http://jsfiddle.net/dUU7j/

We Keep Coding

JavaScript is the programming language of the Web.

show/hide div using javascript - javascript

Related

Text doesn't appear when outputting it on HTML

textarea value property ignore the linebreaks and whitespaces when read it with javascript

Show/Hide Javascript one at a time

entire page moves up when i click menu bottom tag

Toggling multiple divs with one link Javascript

Categories

Resources