Develop Reference

how to return rating on a span element?

I am trying to make a interactive rating component. I have no clue how I can return the result on a span element after a rating is chosen.
When I enter the rating on buttons:
After I submit the rating:
There I want to return the result.
I was trying an if statement in the forEach function but didn't know how to return the result on the span element.
const allBtns = document.querySelectorAll('.btn');
allBtns.forEach(btn => {
btn.addEventListener('click', function onClick() {
btn.style.backgroundColor = 'orange';
})
});
function ShowAndHide() {
let y = document.querySelector('.ratingbox');
let x = document.querySelector('.thankyou');
if (x.style.display == 'none') {
y.style.display = 'none';
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
<div class="ratingbox">
<div class="backgroundstar">
<img src="images/icon-star.svg" alt="" class="star">
</div>
<div class="writing">
<h1>How did we do?</h1>
<p>Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering! </p>
</div>
<div class="flexbox">
<ul>
<li><button class="btn"><p id="num">1</p></button></li>
<li><button class="btn"><p id="num">2</p></button></li>
<li><button class="btn"><p id="num">3</p></button></li>
<li><button class="btn"><p id="num">4</p></button></li>
<li><button class="btn"><p id="num">5</p></button></li>
</ul>
<button class="submit" onclick="ShowAndHide()">SUBMIT</button>
</div>
</div>
<div class="thankyou " style="display: none; ">
<div class="message ">
<img src="https://via.placeholder.com/50" alt=" " class="img ">
<div class="selected ">
<span id="rating "></span>
</div>
<div class="greeting ">
<h2>Thank you!</h2>
<p id="appreciate ">We appreciate you taking the thime to give a rating.<br> If you ever need more support, don't hesitate to <br> get in touch!
</p>
</div>
</div>
</div>

Use the right tool for the job.
Use radio buttons to manage your rating and style the labels how you'd like. Then use CSS to handle hiding and showing. Leave JavaScript to manipulating the DOM.
Keep in mind IDs need to be unique. Once they are no longer unique, they are no longer ids. Things like document.getElementById will break if ID is not unique.
/*Get out radio buttons based on the name attribue*/
const allBtns = document.querySelectorAll('[name=rating]');
/*Add the event listener*/
allBtns.forEach(btn => {
btn.addEventListener('click', function onClick() {
/*Update the text using the value of the radio button*/
document.querySelector("#rating").innerHTML = `Thanks for rating us ${this.value}!`;
})
});
function ShowAndHide() {
/*Toggle the hide class on the appropriate boxes*/
document.querySelector('.ratingbox').classList.toggle("hide");
document.querySelector('.thankyou').classList.toggle("hide");;
}
/*Hide the radion buttons*/
.flexbox input {display:none;}
/*Give some buttonish styling to the check boxes */
.flexbox label {
display:block;
border: 1px blue solid;
border-radius: 50%;
font-size: 1.2em;
font-weight:bold;
text-align:center;
line-height:30px;
height: 30px;
width:30px;
margin-bottom: 1em;
}
/*Change the styling of the checked label*/
/*Note the use of the adjacent sibling cominator + */
.flexbox :checked + label {
background-color: orange;
}
/*Generic class to handle showing and hiding*/
.hide {
display:none;
}
<div class="ratingbox">
<div class="backgroundstar">
<img src="images/icon-star.svg" alt="" class="star">
</div>
<div class="writing">
<h1>How did we do?</h1>
<p>Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering! </p>
</div>
<div class="flexbox">
<ul>
<!-- Using radio buttons , that will be hidden with associated labels -->
<li><input type="radio" name="rating" id="rtr1" value="1"><label for="rtr1">1</label></li>
<li><input type="radio" name="rating" id="rtr2" value="2"><label for="rtr2">2</label></li>
<li><input type="radio" name="rating" id="rtr3" value="3"><label for="rtr3">3</label></li>
<li><input type="radio" name="rating" id="rtr4" value="4"><label for="rtr4">4</label></li>
<li><input type="radio" name="rating" id="rtr5" value="5"><label for="rtr5">5</label></li>
</ul>
<button class="submit" onclick="ShowAndHide()">SUBMIT</button>
</div>
</div>
<div class="thankyou hide">
<div class="message ">
<img src="https://via.placeholder.com/50" alt=" " class="img ">
<div class="selected ">
<span id="rating"></span>
</div>
<div class="greeting ">
<h2>Thank you!</h2>
<p id="appreciate ">We appreciate you taking the thime to give a rating.<br> If you ever need more support, don't hesitate to <br> get in touch!
</p>
</div>
</div>
</div>

There are multiple issues with your code. The main issue is you are using the same id, num, for multiple elements, which is invalid. Change those id's to class instead, like this:
<ul>
<li><button class="btn"><p class="num">1</p></button></li>
<li><button class="btn"><p class="num">2</p></button></li>
<li><button class="btn"><p class="num">3</p></button></li>
<li><button class="btn"><p class="num">4</p></button></li>
<li><button class="btn"><p class="num">5</p></button></li>
</ul>
After doing that, one way to acquire the most recently selected button is to find the nested .num within your button click eventListeners, such as var rating = parseInt(btn.querySelector(".num").textContent)
Here is how you might do that with minimal changes to your current code:
const allBtns = document.querySelectorAll('.btn');
var currentRating = null;
allBtns.forEach(btn => {
btn.addEventListener('click', function onClick() {
btn.style.backgroundColor = 'orange';
currentRating = parseInt(btn.querySelector(".num").textContent)
})
});
function ShowAndHide() {
if (currentRating){
alert(currentRating);
}
let y = document.querySelector('.ratingbox');
let x = document.querySelector('.thankyou');
if (x.style.display == 'none') {
y.style.display = 'none';
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
Here is a JsFiddle that does just this and alerts the selected rating:
https://jsfiddle.net/eg4Ly0nd/
Note: I would recommend using hidden checkbox inputs within each of the li buttons and adding to code your event listener to check the selected input associated with a button and uncheck the others. Then you don't need the global currentRating variable that is included in my solution; you can just find the input that is checked. I only wrote it this way to make minimal changes to the code you provided while still giving a solution.

Just an alternative solution, you can set the rating value for each button by Javascript only, and with minimal change to existing code.
This way, it is independent to any content in p. It also saves the trouble of reading the p tag, since you might need to replace it with something else according to design.
The below Javascript snippet can be used with your posted HTML without changes.
Full example (run it with the button below for demo):
const allBtns = document.querySelectorAll('.btn');
const resultSpan = document.querySelector(".selected span")
allBtns.forEach((btn, i) => {
btn.addEventListener('click', function onClick() {
btn.style.backgroundColor = 'orange';
// Customize the output text here
// It displays in Success screen
resultSpan.innerText = `You have rated ${i + 1}`;
})
});
function ShowAndHide() {
let y = document.querySelector('.ratingbox');
let x = document.querySelector('.thankyou');
if (x.style.display == 'none') {
y.style.display = 'none';
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
<div class="ratingbox">
<div class="backgroundstar">
<img src="images/icon-star.svg" alt="" class="star">
</div>
<div class="writing">
<h1>How did we do?</h1>
<p>Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering! </p>
</div>
<div class="flexbox">
<ul>
<li><button class="btn"><p>1</p></button></li>
<li><button class="btn"><p>2</p></button></li>
<li><button class="btn"><p>3</p></button></li>
<li><button class="btn"><p>4</p></button></li>
<li><button class="btn"><p>5</p></button></li>
</ul>
<button class="submit" onclick="ShowAndHide()">SUBMIT</button>
</div>
</div>
<div class="thankyou " style="display: none; ">
<div class="message ">
<img src="https://via.placeholder.com/50" alt=" " class="img ">
<div class="selected ">
<span id="rating "></span>
</div>
<div class="greeting ">
<h2>Thank you!</h2>
<p id="appreciate ">We appreciate you taking the thime to give a rating.<br> If you ever need more support, don't hesitate to <br> get in touch!
</p>
</div>
</div>
</div>
But as other comments mentioned, it is recommended that you assign a different id for each p, or no id at all since no need to read these tags in code anyway.

How to open a div with button click and closing all other divs at the same time in jQuery

How can I show a specific div element with a button click and close all other elements at the same time in jQuery?
For example, I tired:
$('.button').each(function(i) {
$(this).click(function() {
$('.details').eq(i).slideToggle("slow")
$('.button').eq(i);
});
});
.details {
background: grey;
display: none;
}
.is-open {
display: block;
}
<!-- language: lang-html -->
<button id="button0" class="button">button 1</button>
<button id="button1" class="button">button 2</button>
<button id="button2" class="button">button 3</button>
<div class="details" id="details0">
<h1>Details Person 1</h1>
</div>
<div class="details" id="details1">
<h1>Details Person 2</h1>
</div>
<div class="details" id="details2">
<h1>Details Person 3</h1>
</div>
But this only toggles one elements without closing the others. But I want to close every opened element by clicking the one which isn't opened already.
I tried it with the suggested siblings() method but this did not apply for my case because I have my button elements separated from the button elements.
What is the best solution to achieve such an effect described above?

If you adjust your HTML to have data attributes where each button data-id corresponds to a data-id on a details element it makes it much simpler.
// Use event delegation to listen to events from the buttons
$(document).on('click', 'button', handleClick)
function handleClick() {
// Grab the id from the button
const id = $(this).data('id');
// Remove all the `show` classes from the details elements
$('.details').removeClass('show');
// And then add that class back on to the details element
// that corresponds to the id
$(`.details[data-id=${id}]`).addClass('show');
}
.details { background: grey; display: none; }
.show { display: block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-id="1">button 1</button>
<button data-id="2">button 2</button>
<button data-id="3">button 3</button>
<div class="details" data-id="1">
<h1>Details Person 1</h1>
</div>
<div class="details" data-id="2">
<h1>Details Person 2</h1>
</div>
<div class="details" data-id="3">
<h1>Details Person 3</h1>
</div>
Additional documentation
Event delegation
Template/string literals

Do you want to implement the tab?
https://jqueryui.com/tabs/
$('.button').each(function (i) {
$(this).click(function () {
$('.details').eq(i).show("slow").siblings('.details').hide();
});
});

Here is my solution:
$('.button').each( function(index,button){
//console.log(button.outerHTML);
$(button).click(function(){
let id=this.id.replace("button","");
$(".details").hide()
$("#details"+id).show();
})
});
.details {
background: grey;
display: none;
}
.is-open {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button0" class="button">button 1</button>
<button id="button1" class="button">button 2</button>
<button id="button2" class="button">button 3</button>
<div class="details" id="details0">
<h1>Details Person 1</h1>
</div>
<div class="details" id="details1">
<h1>Details Person 2</h1>
</div>
<div class="details" id="details2">
<h1>Details Person 3</h1>
</div>

javascript tabs without passing any parameters to function

Hello so I have tabs using javascript:
function openScreen(screen, button) {
let i;
const tabContent = document.getElementsByClassName("tab-content");
const tabButton = document.getElementsByClassName("tab-button");
for (i = 0; i < tabContent.length; i++) {
tabContent[i].style.display = "none";
}
document.getElementById(screen).style.display = "block";
for (i = 0; i < tabButton.length; i++) {
tabButton[i].classList.remove('active');
}
document.getElementById(button).classList.add('active');
}
<div class="tab-links">
<button id="login-button" class="active tab-button" onclick="openScreen('Login', 'login-button')">Login</button>
<button id="register-button" class="tab-button" onclick="openScreen('Register', 'register-button')">Register</button>
</div>
<div>
<div id="Login" class="tab-content">
<p>Login</p>
</div>
<div id="Register" class="tab-content" style="display:none">
<p>Register</p>
</div>
</div>
And this is working, but I want to do this without passing any parameters to function and do it without using onclick function. But I dont image how I should achieve this.

This is a perfect task for event delegation. You register one even listener for the click event on the element that wraps the buttons and the content. In that event listener, you can use e.target is the element from which the event originated. e.currentTarget is the one on which the listener was attached.
In the listener, you need to figure out if it was really the button. Which could be done by checking for a certain property (in this case for the data-target attribute)
function openScreen(tabContainer, button) {
// remove active class from tab-content and tab-button in the current tab container
tabContainer.querySelectorAll(".tab-content.active, .tab-button.active").forEach(elm => {
elm.classList.remove('active');
})
// add the active class to the button and the container set by the target
let screen = button.dataset.target;
document.getElementById(screen).classList.add('active');
button.classList.add('active');
}
// Add the delegate event listener to all tab-conainers
document.querySelectorAll(".tab-container").forEach(container => {
container.addEventListener('click', (e) => {
// check if the event happened on an element with the `data-target` attribute
if (e.target.dataset.target) {
const tabContainer = e.currentTarget
const button = e.target
openScreen(tabContainer, button)
}
})
})
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
<div class="tab-container">
<div class="tab-links">
<button id="login-button" data-target="Login" class="tab-button active">Login</button>
<button id="register-button" data-target="Register" class="tab-button">Register</button>
</div>
<div>
<div id="Login" class="tab-content active">
<p>Login</p>
</div>
<div id="Register" class="tab-content">
<p>Register</p>
</div>
</div>
</div>
<hr>
<div class="tab-container">
<div class="tab-links">
<button id="login-button2" data-target="Login2" class="tab-button active">Login2</button>
<button id="register-button2" data-target="Register2" class="tab-button">Register2</button>
</div>
<div>
<div id="Login2" class="tab-content active">
<p>Login2</p>
</div>
<div id="Register2" class="tab-content">
<p>Register2</p>
</div>
</div>
</div>

You can do it with data attributes https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
short example
<div class="tab" data-type="login"></div>
<div class="tab" data-type="register"></div>
Then
const tabs = document.querySelectorAll('.tab');
for (let tab of tabs) {
tab.onclick = function () {
const type = this.dataset.type;
/*now you can do all needed actions*/
}
}

Do you mean something like this?
function openScreen(e) {
const button = e.target;
const { screen } = button.dataset;
const tabs = document.querySelectorAll('.tab-content');
tabs.forEach(tab => tab.classList.toggle('active', screen === tab.id));
}
const buttons = document.querySelectorAll('button');
buttons.forEach(button => button.addEventListener('click', openScreen));
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
<div class="tab-links">
<button
id="login-button"
class="active tab-button"
data-screen="Login"
>Login</button>
<button
id="register-button"
class="tab-button"
data-screen="Register"
>Register</button>
</div>
<div>
<div id="Login" class="tab-content active">
<p>Login</p>
</div>
<div id="Register" class="tab-content">
<p>Register</p>
</div>
</div>

as your request. not passing any parameter. let me know at comment section if something doesn't work correctly.
$('#login-button').click(function(){
switchTab( $(this), $('#Login') );
});
$('#register-button').click(function(){
switchTab( $(this), $('#Register') );
});
function switchTab(this_, target_){
$('.tab-content').hide();
target_.show();
$('.tab-button').removeClass('active');
this_.addClass('active');
}
button.active{
border:1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-links">
<button id="login-button" class="active tab-button">Login</button>
<button id="register-button" class="tab-button">Register</button>
</div>
<div>
<div id="Login" class="tab-content">
<p>Login</p>
</div>
<div id="Register" class="tab-content" style="display:none">
<p>Register</p>
</div>
</div>

How to use Jquery to change div css/scss on a dropdown menu?

I am a jquery beginner. I'm trying to make a dropdown menu where when the user clicks one of the buttons it will link to its correct section. Before a user clicks a button, all sections must be hidden (display: none), but when an option is selected from the dropdown, I want to use js/jquery to trigger a css change in the section div to appear (display: block). Pretty lost and I can't seem to get the jquery to work, any help would be greatly appreciated!
Thank you!
$(document).ready(function() {
$('#departments a').on('click',function()) {
$(this).css({'display','block'});
});
}
article.apply {
padding-bottom: 6rem;
}
article.apply p {
margin-bottom: 4rem;
}
article.apply div.math {
display: none;
}
article.apply div.cmsc {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<a id= "selectedDept" class="dropbtn button button-red
caret"> Search </a>
<div id = "departments" class="dropdown-content">
<a class= "dept" href="#math">MATH</a>
<a class= "dept" href="#cmsc">CMSC</a>
</div>
</div>
<article class="apply">
<div class=“math”>
<h2> Hello World </h2>
</div>
<div class=“cmsc”>
<h2> Hello World! </h2>
</div>
</article>

As you can see with the console on your snippet code your Javascript was very wrong:
You forgot to close the last ) (of the ready() function)
You close the function .on() before the {} of the callback
You update the css with {'display','block'} instead of {'display': 'block'}
$(document).ready(function() {
$('#departments a').on('click', function() {
$(this).css({'display':'block'});
});
});
article.apply {
padding-bottom: 6rem;
}
article.apply p {
margin-bottom: 4rem;
}
article.apply div.math {
display: none;
}
article.apply div.cmsc {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<a id= "selectedDept" class="dropbtn button button-red caret"> Search </a>
<div id = "departments" class="dropdown-content">
<a class= "dept" href="#math">MATH</a>
<a class= "dept" href="#cmsc">CMSC</a>
</div>
</div>
<article class="apply">
<div class=“math”>
<h2> Hello World </h2>
</div>
<div class=“cmsc”>
<h2> Hello World! </h2>
</div>
</article>

How to rewrite this code?

So I have got this code for my website, which I built myself and works fine. The thing is, that I want the JavaScript code 'cleaner'. I read that JavaScript was all about not-rewriting code. The problem is that I don't really know how to restructure the dropDownOne through dropDownSeven functions.
Each of the functions corresponds to a particular button, which on click then shows the corresponding information block by applying the class 'show' on it, which only got one property: Display: block;
So to wrap it up: how do I get to rework the code, so that I only need say, one function for all the buttons to click on. If a particular button is clicked, that buttons content should show, and not that from the others.
-No jQuery-
HTML:
<div class="dropdown">
<button onclick="dropDownFour()" class="projectbuttons">
PSD to Bussiness Site (01-2017)
</button>
<div id="dropdownfour" class="dropdown-content">
<!--Content-->
</div>
</div>
JavaScript:
function dropDownOne() {
document.getElementById("dropdownone").classList.toggle("show");
}
function dropDownTwo() {
document.getElementById("dropdowntwo").classList.toggle("show");
}
function dropDownThree() {
document.getElementById("dropdownthree").classList.toggle("show");
}
function dropDownFour() {
document.getElementById("dropdownfour").classList.toggle("show");
}
function dropDownFive() {
document.getElementById("dropdownfive").classList.toggle("show");
}
function dropDownSix() {
document.getElementById("dropdownsix").classList.toggle("show");
}
function dropDownSeven() {
document.getElementById("dropdownseven").classList.toggle("show");
}
window.onclick = function (event) {
if (!event.target.matches('.aboutmebuttons, .projectbuttons,
#mailopenbutton, [name="name"],
[name="message"], ' + '[name="email"],
[name="submitmail"], [name="reset"],
#dropdownseven, #mailform')
) {
var dropDowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropDowns.length; i++) {
var openDropDown = dropDowns[i];
if (openDropDown.classList.contains('show')) {
openDropDown.classList.remove('show');
}
}
}
}
Thanks!

function dropDown(id){
document.getElementById(id).classList.toggle("show");
}
And then you could use it like that
<div class="dropdown">
<button onclick="dropDown('dropdownfour')" class="projectbuttons">PSD to Bussiness Site (01-2017)</button>
<div id="dropdownfour" class="dropdown-content">
<!--Content-->
</div>
</div>

function dropdown(dropdown){
document.getElementById(dropdown).classList.toggle("show");
}
Then use this HTML:
<div class="dropdown">
<button onclick="dropdown('dropdownfour')" class="projectbuttons">
PSD to Bussiness Site (01-2017)
</button>
<div id="dropdownfour" class="dropdown-content">
<!--Content-->
</div>
</div>

You may use the this and event keywords:
Change this html line:
<button onclick="dropDownFour()" class="projectbuttons">
to:
<button onclick="dropDown(this, event)" class="projectbuttons">PSD to Bussiness Site (01-2017)</button>
From MDN:
In an in–line event handler
When code is called from an in–line on-event handler, its this is set to the DOM element on which the listener is placed:
And the final function is:
function dropDown(ele, evt) {
ele.classList.toggle("show");
}
The snippet:
function dropDown(ele, evt) {
ele.classList.toggle("show");
}
.show {
display: none;
}
<div class="dropdown">
<button onclick="dropDown(this, event)" class="projectbuttons">PSD to Bussiness Site (01-2017)</button>
<div id="dropdownfour" class="dropdown-content">
<!--Content-->
aaaaaaaaaaaaaaaaaaaa
</div>
</div>
Another short form is based on:
DOMContentLoaded: when document is ready
querySelectorAll: select all button with class under div with class
addEventListener: create the click event handler for each element
window.addEventListener('DOMContentLoaded', function(e) {
document.querySelectorAll('div.dropdown button.projectbuttons').forEach(function(ele, idx) {
ele.addEventListener('click', function(e) {
ele.classList.toggle("show");
})
});
});
.show {
display: none;
}
<div class="dropdown">
<button class="projectbuttons">PSD to Bussiness Site (01-2017)</button>
<div id="dropdownfour" class="dropdown-content">
<!--Content-->
aaaaaaaaaaaaaaaaaaaa
</div>
</div>
<div class="dropdown">
<button class="projectbuttons">PSD to Bussiness Site (01-2017)</button>
<div id="dropdownfour" class="dropdown-content">
<!--Content-->
bbbbbb
</div>
</div>
<div class="dropdown">
<button class="projectbuttons">PSD to Bussiness Site (01-2017)</button>
<div id="dropdownfour" class="dropdown-content">
<!--Content-->
ccccc
</div>
</div>

You can use like that way also
HTML
<div class="dropdown">
<button onclick="dropDown(this)" class="projectbuttons">
1 button
</button>
<div id="dropdownone" class="dropdown-content">
<!--Content--> 1 content
</div>
</div>
<div class="dropdown">
<button onclick="dropDown(this)" class="projectbuttons">
2 button
</button>
<div id="dropdowntwo" class="dropdown-content">
<!--Content--> 2 content
</div>
</div>
<div class="dropdown">
<button onclick="dropDown(this)" class="projectbuttons">
3 button
</button>
<div id="dropdownthree" class="dropdown-content">
<!--Content--> 3 content
</div>
</div>
JAVASCRIPT
function dropDown(element){
element.parentElement.getElementsByClassName("dropdown-content")[0].classList.toggle("show") ;
}
Thanks,