Text doesn't appear when outputting it on HTML

Text doesn't appear when outputting it on HTML - javascript

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;
}

Related

Can't replace image when I click panel croussel item

I can't seem to find a way to replace an image (used cats as an example) when I click one panel that isn't the one i've clicked before.
if (clicked=="panel1" && (document.getElementById("imagemLat1").style.visibility == "hidden")) || (clicked=="panel1" && ((document.getElementById("imagemLat2").style.visibility == "visible") || (document.getElementById("imagemLat3").style.visibility == "visible")))
This doesn't seem to work, and I'm not quite sure why.
Also, i'm not quite sure how to have all three images in the same spot; I've tried to have them all inside the same div, with no success.
Finally, is it possible to have only one panel open? My idea was if we click one, the previously opened one was supposed to close.
var el_down = document.getElementById("accordion");
<!-- var cliques = document.getElementById("cliques"); -->
var div = 0;
<!-- var height = document.panel.style.height; -->
document.getElementById("imagemLat1").style.visibility = "hidden";
document.getElementById("imagemLat2").style.visibility = "hidden";
document.getElementById("imagemLat3").style.visibility = "hidden";
function clicado(clicked){
el_down.innerHTML = "ID = "+clicked;
div++;
//<!-- el_down.innerHTML = "painel = "+height; -->
if (clicked=="panel1" && div%2!="0"){
//if (clicked=="panel1" && (document.getElementById("imagemLat1").style.visibility == "hidden")) || (clicked=="panel1" && ((document.getElementById("imagemLat2").style.visibility == "visible") || (document.getElementById("imagemLat3").style.visibility == "visible"))){
document.getElementById("imagemLat1").style.visibility = "visible";
document.getElementById("imagemLat2").style.visibility = "hidden";
document.getElementById("imagemLat3").style.visibility = "hidden";
}
else {
document.getElementById("imagemLat1").style.visibility = "hidden";
}
if (clicked=="panel2" && div%2!="0"){
// document.getElementById("imagemLat1").style.visibility = "hidden"; -->
document.getElementById("imagemLat2").style.visibility = "visible";
// document.getElementById("imagemLat3").style.visibility = "hidden"; -->
}
else{
document.getElementById("imagemLat2").style.visibility = "hidden";
}
if (clicked=="panel3" && div%2!="0"){
document.getElementById("imagemLat3").style.visibility = "visible";
}
else{
document.getElementById("imagemLat3").style.visibility = "hidden";
}
}
var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName("panel");
var el_down = document.getElementById("accordion");
var cliques = document.getElementById("cliques");
var div = 0;
var i;
for (i = 0; i < acc.length ; i++) {
acc[i].addEventListener("click", function(clicado) {
this.classList.toggle("toggle");
div++;
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
);
}
.accordion {
/* background-color: #777; */
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
/* background-color: #ccc; */
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.toggle:after {
content: "\2212";
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic" rel="stylesheet" type="text/css" />
<!-- Third party plugin CSS-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<!-- Third party plugin JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts_test.js"></script>
<!-- Scroll function !-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div class="row d-flex justify-content-start">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-7">
<br><div class="h4 text-white-75 mb-2"><h3><i class="fa fa-lightbulb" aria-hidden="true"></i> Ambiente</h3></div>
<p id = "accordion"> </p>
<button class="accordion" id="panel1" onclick="clicado(this.id)">Dimensionamento do espaço</button>
<div class="panel">
<br><p>Quantas vezes já ouviu queixas sobre a sua cozinha com pouca luz ou sentiu dores de cabeça e desconforto com luz demasiado forte?</p>
<p style="text-align: justify; text-justify: inter-word;">É fundamental determinar a quantidade de luz e de luminárias para cada ambiente, uma vez que a iluminação excessiva pode causar desconforto ocular e aumentar despesas com a eletricidade, e uma iluminação insuficiente pode causar diversos problemas graves para a sua saúde física, mental e social.</p>
<p style="text-align: justify; text-justify: inter-word;">Com uma análise cuidada dos objetivos para cada ambiente em estudo e das especificações que o cliente pretende, é possível calcular e projetar soluções adequadas às necessidades dos clientes de forma eficiente e sustentável.</p>
</div>
<button class="accordion" id="panel2" onclick="clicado(this.id)">Posicionamento de luminárias para um melhor aproveitamento</button>
<div class="panel">
<br><p style="text-align: justify; text-justify: inter-word;">No decorrer da realização do estudo luminotécnico, o tipo de iluminação pretendido e os objetos existentes no espaço em estudo, são de extrema relevância, pois estes são indispensáveis para projetar uma iluminação eficiente, posicionando as luminárias da melhor forma, tendo sempre em conta as atividades que serão realizadas no ambiente em estudo.</p>
</div>
<button class="accordion" id="panel3" onclick="clicado(this.id)">Personalizar ambientes de acordo com a necessidade</button>
<div class="panel">
<br><p style="text-align: justify; text-justify: inter-word;">Cada cliente tem as suas próprias especificações e necessidades, e cada espaço tem uma função especifica.<br>O estudo luminotécnico permite personalizar e adaptar o espaço às necessidades reais de cada cliente. </p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-5"><br><br><br>
<div class="sidebar-image">
<div class="imagemLateral">
<a id="imagemLat1" href="testMain.html"><span style="display: block;" id= "cliques"><img id="logo1" src="https://i.ytimg.com/vi/fleIpdMXopc/maxresdefault.jpg"></span></a>
</div>
</div>
<div class="sidebar-image">
<div class="imagemLateral">
<a id="imagemLat2" href="testMain.html"><span style="display: block;" id= "cliques"><img id="logo2" src="https://www.pets4homes.co.uk/images/classifieds/2013/10/02/438916/large/lovely-1-year-old-tabby-cat-female-524c0ebc2c3f1.jpg"></span></a>
</div>
</div>
<div class="sidebar-image">
<div class="imagemLateral">
<a id="imagemLat3" href="testMain.html"><span style="display: block;" id= "cliques"><img id="logo3" src="https://www.pets4homes.co.uk/images/classifieds/2013/08/21/398215/large/1-year-old-male-fluffy-white-cat-52147ca5d8b39.jpg"></span></a>
</div>
</div>
</div>
</div>
</body>
</html>

Well you can achieve this by the following ways in below snippet .
The first code which is commented in JS is dynamic one but it don't work as you need ( that is when one accordion is clicked then others are closed ) but it is fast because you can work with as many accordion as you want using single JS .
//function panelClick(reed) {
// reed.classList.toggle("active");
// var daad = reed.nextElementSibling;
// if (daad.style.display === "block") {
// daad.style.display = "none";
// } else {
// daad.style.display = "block";
// }
//}
function panelClick1() {
document.getElementsByClassName("panel")[1].style.display = "none";
document.getElementsByClassName("panel")[2].style.display = "none";
var daad = document.getElementById("panel1Content");
if (daad.style.display === "block") {
daad.style.display = "none";
} else {
daad.style.display = "block";
}
var reed = document.getElementById("panel1Img");
if (reed.style.display === "block") {
reed.style.display = "none";
} else {
reed.style.display = "block";
}
document.getElementById("panel2Img").style.display = "none";
document.getElementById("panel3Img").style.display = "none";
}
function panelClick2() {
document.getElementsByClassName("panel")[0].style.display = "none";
document.getElementsByClassName("panel")[2].style.display = "none";
var daad = document.getElementById("panel2Content");
if (daad.style.display === "block") {
daad.style.display = "none";
} else {
daad.style.display = "block";
}
document.getElementById("panel1Img").style.display = "none";
var reed = document.getElementById("panel2Img");
if (reed.style.display === "block") {
reed.style.display = "none";
} else {
reed.style.display = "block";
}
document.getElementById("panel3Img").style.display = "none";
}
function panelClick3() {
document.getElementsByClassName("panel")[0].style.display = "none";
document.getElementsByClassName("panel")[1].style.display = "none";
var daad = document.getElementById("panel3Content");
if (daad.style.display === "block") {
daad.style.display = "none";
} else {
daad.style.display = "block";
}
document.getElementById("panel1Img").style.display = "none";
document.getElementById("panel2Img").style.display = "none";
var reed = document.getElementById("panel3Img");
if (reed.style.display === "block") {
reed.style.display = "none";
} else {
reed.style.display = "block";
}
}
.accordion {
/* background-color: #777; */
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.panel {
padding: 0 18px;
background-color: white;
display: none;
}
.panelImg {
display: none
}
<div>
<button class="accordion" id="panel1" onclick="panelClick1()"> Panel1</button>
<div class="panel" id="panel1Content">
<p>This is 1st pannel content</p>
</div>
<button class="accordion" id="panel2" onclick="panelClick2()">Panel2</button>
<div class="panel" id="panel2Content">
<p>This is 2nd pannel content</p>
</div>
<button class="accordion" id="panel3" onclick="panelClick3()">Panel3</button>
<div class="panel" id="panel3Content">
<p>This is 3rd pannel content</p>
</div>
<div id="demo"></div>
</div>
<img src="#1" alt="#1" id="panel1Img" class="panelImg">
<img src="#2" alt="#2" id="panel2Img" class="panelImg">
<img src="#3" alt="#3" id="panel3Img" class="panelImg">
Also , instead of changing images put them in panelContent's <div> element so they will hide and show with accordion and it will reduce some of the code making execution a little bit fast

JavaScript popup with delay

What am I doing wrong here? A simple (test) div. I want it to pop up automatically with a delay.
<div id="myModal">
<span class="close">×</span>
<p style="font-size: 20px; text-align: center;">My Modal</p>
</div>
<script>
function MyTest() {
document.getElementById("myModal").style.display = "block";
setTimeout(myModal, 3000);
}
var close = document.getElementsByClassName("close") [0];
close.onclick = function() {
myModal.style.display = "none";
}
</script>

Move document.getElementById("myModal").style.display = "block"; inside setTimeOut.
<div id="myModal">
<span class="close">×</span>
<p style="font-size: 20px; text-align: center;">My Modal</p>
</div>
<script>
function MyTest() {
document.getElementById("myModal").style.display = "none";
setTimeout(function() {
document.getElementById("myModal").style.display = "block";
}, 3000);
}
MyTest();
var close = document.getElementsByClassName("close") [0];
close.onclick = function() {
myModal.style.display = "none";
}
</script>

refactoring javascript code to create for loop

I am practicing Javascript. I want each link to display something different in the DOM when clicked.
Here is my current Javascript that works.
//used a 'for' loop to hide each 'notes' page
const element = document.querySelectorAll(".notes");
for (let x = 0; x < element.length; x++)
element[x].style.display = 'none';
const html_link= document.getElementById('html-link');
const css_link = document.getElementById('css-link');
const javascript_link = document.getElementById('js-link');
const html_notes = document.getElementById('html-notes');
const css_notes = document.getElementById('css-notes');
const js_notes = document.getElementById('js-notes');
html_link.onclick = function() {
html_notes.style.display = "block";
css_notes.style.display = "none";
js_notes.style.display = "none";
}
css_link.onclick = function() {
css_notes.style.display = "block";
html_notes.style.display = "none";
js_notes.style.display = "none";
}
javascript_link.onclick = () => {
js_notes.style.display = "block";
html_notes.style.display = "none";
css_notes.style.display = "none";
}
How can I refactor it using a for loop? My thinking was for each link clicked, display notes. But I am struggling to figure out how to display the notes div correctly that matches the link clicked. This is what I have started.
const links = document.querySelectorAll('.links')
for (const link of links) {
link.addEventListener('click', function() {
let ref = event.target.parentElement.id.replace('link','notes');
//replaces parent element with id 'notes'
const show = document.getElementById(ref);
//'show' div with new id
})
}

Welcome, fellow newbie! I've taken the liberty of writing the html and very minimal styling as well. This is my first attempt at an answer on stackoverflow.
Please note some features of the code I've added:
'links' class added to all links.
'notes' class added to all notes.
'data-notes' attribute added to all links (with the id of each link's respective notes)
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
</head>
<body>
<div class="outer">
<div id="html-link" data-notes="html-notes" class="links">
<p>html-link</p>
</div>
<div id="css-link" data-notes="css-notes" class="links">
<p>css-link</p>
</div>
<div id="javascript-link" data-notes="javascript-notes" class="links">
<p>javascript-link</p>
</div>
</div>
<div class="outer">
<div id="html-notes" class="notes">
<p>html-notes</p>
</div>
<div id="css-notes" class="notes">
<p>css-notes</p>
</div>
<div id="javascript-notes" class="notes">
<p>javascript-notes</p>
</div>
</div>
<style>
.links {
cursor: pointer;
background: green;
color: white;
padding: 1rem;
margin: 1rem;
}
.notes {
display: none;
background: blue;
color: white;
padding: 1rem;
margin: 1rem;
}
.outer {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
margin: 2rem 0;
}
</style>
<script>
const links = document.querySelectorAll('.links');
const notes = document.querySelectorAll('.notes');
for (const link of links) {
link.onclick = function () {
for (const note of notes) {
if (note.id == link.dataset.notes) {
note.style.display = "block";
} else {
note.style.display = "none";
}
}
}
}
</script>
</body>
</html>

show/hide div using 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! :)

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;
}

We Keep Coding

JavaScript is the programming language of the Web.

Text doesn't appear when outputting it on HTML - javascript

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

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

Related

Can't replace image when I click panel croussel item

JavaScript popup with delay

refactoring javascript code to create for loop

show/hide div using javascript

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

Categories

Resources