Develop Reference

Toggle text inserted with innerHTML from Javascript

As an exercise I am trying to create a small quiz app and a part of it are the question cards. On these cards I have a question and then a button to show the answer. When the button is clicked, then the answer (which doesn't exist in the HTML DOM yet, therefore not visible) will show up and with the next click, the answer should be hidden again. Basically it will look something like this:
Before Show Answer is clicked
After Show Answer is clicked
Here is the HTML code:
<section class="question-card">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam vitae
labore repudiandae tenetur. Qui maiores animi quibusdam voluptatum
nobis. Nam aperiam voluptatum dolorem quia minima assumenda velit libero
saepe repellat. Tempore delectus deleniti libero aliquid rem velit illum
expedita nostrum quam optio maiores officiis consequatur ea, sint enim
cum repudiandae inventore ab nemo?
</p>
<div class="bookmark">
<i class="fa-regular fa-bookmark fa-lg"></i>
</div>
<button class="answer-button" data-js="answer-button">Show Answer</button>
<ul class="answer-container" data-js="answer-container">
</ul>
<div class="container-categories">
<button class="category-button category-html">#html</button>
<button class="category-button category-flexbox">#flexbox</button>
<button class="category-button category-css">#css</button>
<button class="category-button category-js">#js</button>
</div>
</section>
I have added an EventListener for the Show Answer button that adds a list item in the already existing ul when it is clicked. I have done this with innerHTML:
const answerButton = document.querySelector(".answer-button");
const answerContainer = document.querySelector(".answer-container");
const answer1 = "Lorem ipsum dolor sit amet consectetur adipisicing elit.";
answerButton.addEventListener("click", () => {
answerContainer.innerHTML = `<li class="show-answer">${answer1}</li>`;
});
Now what I can't seem to manage is to hide the answer when the button is clicked again (the next challenge will be that the button will change the text to "Hide Answer" after the first click, but I have no idea how to approach that yet). The closest I got was this:
answerButton.addEventListener("click", () => {
answerContainer.innerHTML = `<li class="show-answer">${answer1}</li>`;
answerContainer.classList.toggle("hide-answer");
});
However, this method displays the .hide-answer class first, after which the 2 classes are toggled and everything is as it should be. So after the first click, the answer is still hidden and only after the 2nd click the button behaves the way I want it to.
I have tried this as well:
answerButton.addEventListener("click", () => {
answerContainer.innerHTML = `<li class="hide-answer">${answer1}</li>`;
answerContainer.classList.toggle("show-answer");
});
But for some reason this shows the container with all the CSS properties, but there is no text:
Answer Container is there, but no text
This is the CSS for the 2 classes (show-answer and hide-answer):
.show-answer {
background-color: hotpink;
border-radius: 7px;
border: none;
list-style: none;
width: 50%;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px;
}
.hide-answer {
display: none;
}
If anybody has any idea how I could get the result I need, I would be extremely grateful...

You're mixing up the answer-container with the answer-container's child (the innerHtml <li> element).
initially there's a visible, but empty <ul class="answer-container"></ul>.
Next on click of the button, you add the content into the answer-container expecting it to be visible with a show-answer class
Immediately after, you add the hide-answer class to the <ul class="answer-container"> parent element which hides the newly added content.
Click the button again and you finally see your answer because the container element has the hide-answer class toggled off. From here it works as you're expecting.
You can fix this by having the answer-container be hidden initially and then continue to toggle the display of the container. You can also just use a DOM element's hidden attribute to do this as I do in this code snippet below where I've taken your exact example and just modified the answer-container to start with hidden and toggle the hidden attribute on click. You can do the same thing w/ a CSS display: none class too.
const answerButton = document.querySelector(".answer-button");
const answerContainer = document.querySelector(".answer-container");
const answer1 = "Lorem ipsum dolor sit amet consectetur adipisicing elit.";
answerButton.addEventListener("click", () => {
answerContainer.innerHTML = `<li class="answer">${answer1}</li>`;
answerContainer.hidden = !answerContainer.hidden;
});
.answer {
background-color: hotpink;
border-radius: 7px;
border: none;
list-style: none;
width: 50%;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<section class="question-card">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam vitae
labore repudiandae tenetur. Qui maiores animi quibusdam voluptatum
nobis. Nam aperiam voluptatum dolorem quia minima assumenda velit libero
saepe repellat. Tempore delectus deleniti libero aliquid rem velit illum
expedita nostrum quam optio maiores officiis consequatur ea, sint enim
cum repudiandae inventore ab nemo?
</p>
<div class="bookmark">
<i class="fa-regular fa-bookmark fa-lg"></i>
</div>
<button class="answer-button" data-js="answer-button">Show Answer</button>
<ul class="answer-container" hidden data-js="answer-container">
</ul>
<div class="container-categories">
<button class="category-button category-html">#html</button>
<button class="category-button category-flexbox">#flexbox</button>
<button class="category-button category-css">#css</button>
<button class="category-button category-js">#js</button>
</div>
</section>

Would something like this work?
You just use if the container has the class show-answer to determine if the answer needs to be shown or hidden
answerButton.addEventListener("click", () => {
if (answerContainer.classList.contains('show-answer')) {
// container has `showing` class
// hide the answer
answerContainer.innerHTML = ``; // ? - my guess, not sure how to want to hide it
}else{
// container doesn't have `showing` class
// show the answer
answerContainer.innerHTML = `<li class="hide-answer">${answer1}</li>`;
};
// update class
answerContainer.classList.toggle("show-answer");
});

Scroll to top on click for a sub drop down menu in html

I like to access content from sub drop down menu immediately without using scroll bar on left hand side as shown in the figure using html
Here is the code I used
<div class="col-sm-12">
<br/>
<button class="collapsible">Drop Down Main</button>
<div class="content"><p></p>
<ul>
<button class="collapsible">Drop Down-1</button>
<div class="content"><p></p>
<p>Line1 </p>
<p>Line 2</p>
<p><b>Line 3</b></p>
</div>
</ul>
<ul>
<button class="collapsible">Drop Down-2</button>
<div class="content"><p></p>
<p>Line1 </p>
<p>Line 2</p>
<p> <b>Line 3</b></p>
</div>
</ul>
<ul>
<button class="collapsible">Drop Down-3</button>
<div class="content"><p></p>
<p>Line1 </p>
<p>Line 2</p>
<p> <b>Line 3</b></p>
</div>
</ul>
<ul>
<button class="collapsible">Drop Down-4</button>
<div class="content"><p></p>
<p>Line1 </p>
<p>Line 2</p>
<p> <b>Line 3</b></p>
</div>
</ul>
</div>
<br/>
This is the style code I used for drop down and sub drop downs.
.collapsible {
background-color: #01579b;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 20px;
}
.active, .collapsible:hover {
background-color: #0043b3;
}
.content {
padding: 0 18px;
max-height: 0px;
overflow: auto;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
Please let me know how we can use html to achieve this. Thanks in advance.

We can use the standard <details> HTML element:
let details = document.querySelectorAll('details>details');
// add toggle event on all sub sections
details.forEach(d => {
d.addEventListener("toggle", event => {
let current = event.target;
// close all others
if (current.open){
details.forEach(e => {
if (current !== e) e.open = false;
});
current.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});
}
});
});
body{
padding: 1rem;
}
summary {
background-color: rgb(46, 46, 255);
color: white;
padding: 0.3rem;
cursor: pointer;
}
details>details {
margin-left: 1rem;
}
details>details>summary {
background-color: rgb(86, 86, 245);
}
details>details[open]>summary {
background-color: rgb(105, 166, 245);
}
details .info {
padding: .5rem;
border: 1px solid gray;
}
<details>
<summary>Drop down main</summary>
<details>
<summary>Drop down 1</summary>
<div class="info">ONE Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, sunt.</div>
</details>
<details>
<summary>Drop down 2</summary>
<div class="info">TWO Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, illo exercitationem sequi voluptatum tempora minus rem amet magnam. Necessitatibus nihil dolores eaque sed quaerat ducimus aliquid cupiditate impedit quam laboriosam odit sequi,
numquam fuga neque! Optio aut at, omnis quasi amet cum rem id fuga velit error cupiditate commodi neque.</div>
</details>
<details>
<summary>Drop down 3</summary>
<div class="info">THREE Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto ad saepe ex obcaecati expedita nulla, nihil laborum esse excepturi natus amet non eligendi atque sint. Tenetur molestias perspiciatis libero perferendis, autem earum et eius numquam
repellat commodi sint dignissimos veritatis eaque ratione voluptatum nam molestiae voluptatibus ipsum illum! Id dolor quos consequuntur vero cumque tenetur, quaerat quam odit non illum exercitationem voluptates! Minima, quia dolore? Accusamus libero?</div>
</details>
<details>
<summary>Drop down 4</summary>
<div class="info">FOUR Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias cupiditate nobis odio iusto, ratione laborum ipsa tempora eos porro repellat recusandae dolore quasi adipisci explicabo consequuntur omnis eveniet asperiores culpa!</div>
</details>
</details>
We can use Element.scrollIntoView() to bring element in view. Play with the method arguments to get desired results.

You can use html as an anchor tag
like for me a navbar:
html:
<nav class="navbar background h-nav-resp">
<ul class=" navlist v-class-resp">
<li>Home</li>
<li>about</li>
<li>services</li>
<li>contact</li>
</ul>
<div class="rightNav v-class-resp">
<input type="text" name="search" id="search" />
<button class="btn btn-sm">search</button>
</div>
<div class="burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</nav>
and then I will just give the ID to every place as In I gave in my nav:
<section class="background firstSection" id="home">
<div class="box-main">
<div class="firsthalf">
<p class="text-big">The future of education is here!</p>
<p class="text-small">
In this country of 7 Billion we need to educate each and all of them
and we are proud to say that The future of education is here.
</p>
<div class="buttons">
<button class="btn">subscribe</button>
<button class="btn">watch video</button>
</div>
<div class="secondhalf">
<img src="img/Laptop.jpg" alt="laptop image" />
</div>
</div>
</div>
</section>
<section class="section" id="about">
<div class="paras">
<p class="SectionTag text-big">The end of your search is here.</p>
<p class="SectionSubTag text-small">
Education is about learning skills and knowledge. It also means
helping people to learn how to do things and support them to think
about what they learn. It's also important for educators to teach ways
to find and use information. Education needs research to find out how
to make it better. It helps people become better citizens, get a
better-paid job, shows the difference between good and bad. Education
shows us the importance of hard work and, at the same time, helps us
grow and develop. Thus, we are able to shape a better society to live
in by knowing and respecting rights, laws, and regulations.
</p>
</div>
<div class="thumbnail">
<img
src="https://source.unsplash.com/random/900×700/?Html"
alt="laptop image"
class="imgfluid"
/>
</div>
</section>
<hr />
<section class="section left" id="services">
<div class="paras">
<p class="SectionTag text-big">When coding meets children in India</p>
<p class="SectionSubTag text-small">
Through coding, students build essential literacy skills, gain an
understanding of logic and sequence, and learn the mechanics of
iteration. These tools support project-based learning and give
students the freedom to create, collaborate, hack, remix, and tinker
with their own unique designs.Coding classes are currently limited to
people with a laptop, internet connection, and paying capacity.
Further, very little content is available in the field which is
suitable for children and apt from the Indian context.
</p>
</div>
<div class="thumbnail">
<img
src="https://source.unsplash.com/random/900×700/?Javascript"
alt="laptop image"
class="imgfluid"
/>
</div>
</section>
<hr />
<section class="section">
<div class="paras">
<p class="SectionTag text-big">Why is programming useful?</p>
<p class="SectionSubTag text-small">
Programming also teaches them how software engineers use math in order
to solve problems in a logical and creative way. This is an important
reason that coding should be taught in schools, so children learn
these skills while they are young.Coding, to put it simply, is using
computer language to tell a computer what to do. The skills necessary
for coding include being able to analyze a problem, break it down,
engage critical thinking, and logic. This “thinking” element is often
referred to as computational thinking.
</p>
</div>
<div class="thumbnail">
<img
src="https://source.unsplash.com/random/900×700/?laptop"
alt="laptop image"
class="imgfluid"
/>
</div>
</section>
<section class="contact" >
<h1 class="text-center" id="contact">Contact Us</h1>
<div class="form">
<input
class="form-input"
type="name"
name="name"
id="name"
placeholder="enter your name"
/>
<input
class="form-input"
type="phone"
name="Phone"
id="phone"
placeholder="enter your phone"
/>
<input
class="form-input"
type="email"
name="email"
id="email"
placeholder="enter your email"
/>
<textarea class="form-input" name="text" id="text" cols="30" rows="10" maxlength="290" wrap="soft" placeholder="Elaborate your concern"></textarea>
<button class="btn btn-dark">Submit</button>
</div>
</section>
<footer class="background">
<p class="text-footer">
Copyright saraswati education-giving eduction online.com © 2022 - All rights reserved
</p>
<div class="designer"><p>Designed and developed by pranjal Rai</p></div>
</footer>
If you click on the link it will scroll at that position but!
add this
css:
html{
scroll-behavior: smooth;
}
It makes it good!

Spacing between long amount of text lines css/html/js

Let's say that i have lots of text that i dont want to be in one single huge line, how could i put some white spacings after a certain amount of words? And should i do this in the CSS file or somewhere else?
So for example: this: "You have succesfully looted the house, as the house was empty you didnt run into any trouble." to: "You have succesfully looted the house, as the house was empty you
didnt run into any trouble."
Might not look as great on this site but i think you will get the idea. The string is empty at first and will be filled by some action that happens on the page.

Specify a width on the container where your text is inside. It is better to use the max-width property since your text may be smaller than the maximal width you want. In this case it is not essential though, since the paragraph is a block element and is full width.
p {
border: 1px solid lightcoral;
}
.ch-wrap {
max-width: 60ch;
}
.px-wrap {
max-width: 200px;
}
<h1>This has no width set</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, doloremque nihil. Illo, veritatis est ipsa cumque culpa praesentium dolor error.</p>
<h1>This has a width of 60 characters</h1>
<p class="ch-wrap">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, doloremque nihil. Illo, veritatis est ipsa cumque culpa praesentium dolor error.</p>
<h1>This has a width of 200px set</h1>
<p class="px-wrap">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, doloremque nihil. Illo, veritatis est ipsa cumque culpa praesentium dolor error.</p>

You can use <br> tag to write in a new line. If you want to put white spaces you have to move the text via CSS. For example:
HTML:
<font id="moving">Some text</font>
CSS: #moving { float: right; }
but if it not works you can try with:
#moving { position: absolute !important; float: right; }
The !important attribute makes sure that the position tag will be set on absolute.

How to create auto popup when I access a website

I was trying to create an auto popup when I access a web store that is developed in Shopif
<SCRIPT TYPE="text/javascript">
function popup(mylink, windowname) {
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string') href=mylink;
else href=mylink.href;
window.open(href, windowname, 'width=400,height=200,scrollbars=yes');
return false;
}
</SCRIPT>
<BODY onLoad="popup('autopopup.html', 'ad')">
I have the above code for Popup Windows Opening Automatically. However, I need assistance on how to make this work on and this is the website that I am trying to work it on https://petit-tapis.co.uk
Thank you in Advance

As #Scopey said, modern browsers prevent this behavior from auto occurring. You can however add a click or if you want people to take action first before doing anything else, you can for example add an overlay that blocks any other functionality (but I can tell you that this kills user experience).
Maybe say more what your goal is. Why do you want this extra window to open? What benefit is there in doing this (what do you and what does the user get out of it)?
edit: See my comment below. I also slapped together a very simple version of what I am talking about: https://jsfiddle.net/uthhvu8d/
HTML:
<div class="wrapper">
<div class="overlay">
<form action="">
<input type="text">
<input type="text">
<button>Submit</button>
</form>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, inventore esse aliquam nostrum? Cupiditate provident, delectus, minus voluptatum natus fugiat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus temporibus vitae quibusdam maxime natus fugiat quis amet sed perferendis quod.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nostrum consequatur animi quod rem eos nihil obcaecati repellat. At, accusamus.</p>
</div>
CSS:
.wrapper {
position: relative;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
color: #fff;
display: none;
}
JS:
function showOverlay() {
$('.overlay').show()
}
setTimeout(showOverlay, 2000)

Thankfully, modern browsers prevent this behaviour from happening.
Any window.open must occur only as a direct result of a user triggered event - such as a mouse click or similar.

As #Scopey said browsers stop you opening a pop up window however you could use the HTML5 Dialog and the dialog overlays in the browser have a play you can even open it model if you wanted will take a little longer to get it to work but it's anotion for you
<dialog id="dialog">
<iframe src="autopopup.html" />
</dialog>

How to blur the whole page except the text field I just clicked?

I have a text field top of my website. Now when someone focus on that text field, except that text field everything else available on body will be blur. How to do that? Thanks.

This is easy with jquery:
$(document).ready(function(){
$('#mytext').focus(function(){
$('body').find('*').not('#mytext').addClass('blur');
});
$('#mytext').blur(function(){
$('body').find('*').not('#mytext').removeClass('blur');
});
});
li{
background: red;
}
.blur {
filter: blur(10px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="mytext">
<ul>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis quaerat fugiat culpa animi voluptas at explicabo labore consectetur dignissimos tempora. Libero praesentium quibusdam tempora molestiae nesciunt, unde, molestias quam? Commodi.</p>

CSS does offer a filter: blur(...) option, but it's experimental and subject to change. Here's a blog post with example.
Note that once a parent element is blurred, a child element can't be un-blurred. So you'd have to apply the blur class to all of the elements that don't include your text box as a child. This could be tricky to get right.
A more common option on the web is to put a darkened overlay, for example a full-page element with background-color: rgba(42,42,42,0.7); on top of your page, and use z-index or similar to get your input element to pop on top of that. This is generally simpler and more widely-supported than selective blurring.