JavaScript - Can't deselect a button without causing the page to reload

JavaScript - Can't deselect a button without causing the page to reload - javascript

I have a row of buttons that I can select. I only want to be able to select one button at a time.
If I deselect the last selected button, it causes the page to reload when I actually just want all buttons deselected. Is there a way to accomplish this?
https://jsfiddle.net/donfontaine12/um05k6cw/33/#&togetherjs=Hm5JqaEvUi
let rankedNo1 = document.querySelector("#ranked_no1");
let rankedNo2 = document.querySelector("#ranked_no2");
let rankedNo3 = document.querySelector("#ranked_no3");
let rankedNo4 = document.querySelector("#ranked_no4");
let rankedNo5 = document.querySelector("#ranked_no5");
let rankedNo6 = document.querySelector("#ranked_no6");
let rankedNo7 = document.querySelector("#ranked_no7");
let rankedNo8 = document.querySelector("#ranked_no8");
let rankedNo9 = document.querySelector("#ranked_no9");
let rankedNo10 = document.querySelector("#ranked_no10");
let rankedNoArray = [rankedNo1, rankedNo2, rankedNo3, rankedNo4, rankedNo5, rankedNo6, rankedNo7, rankedNo8, rankedNo9, rankedNo10];
rankedNo1.addEventListener("click", function() {
toggleHighlight(rankedNo1);
event.preventDefault();
});
rankedNo2.addEventListener("click", function() {
toggleHighlight(rankedNo2);
event.preventDefault();
});
rankedNo3.addEventListener("click", function() {
toggleHighlight(rankedNo3);
event.preventDefault();
});
rankedNo4.addEventListener("click", function() {
toggleHighlight(rankedNo4);
event.preventDefault();
});
rankedNo5.addEventListener("click", function() {
toggleHighlight(rankedNo5);
event.preventDefault();
});
rankedNo6.addEventListener("click", function() {
toggleHighlight(rankedNo6);
event.preventDefault();
});
rankedNo7.addEventListener("click", function() {
toggleHighlight(rankedNo7);
event.preventDefault();
});
rankedNo8.addEventListener("click", function() {
toggleHighlight(rankedNo8);
event.preventDefault();
});
rankedNo9.addEventListener("click", function() {
toggleHighlight(rankedNo9);
event.preventDefault();
});
rankedNo10.addEventListener("click", function() {
toggleHighlight(rankedNo10);
event.preventDefault();
});
function toggleHighlight(r) {
let highlighted = lastHighlighted();
if (highlighted) {
for (let h of highlighted) {
if (h == r) {
r.firstElementChild.classList.remove("selected");
highlighted[h.index].remove();
} else {
h.firstElementChild.classList.remove("selected");
if (r.firstElementChild.classList.contains("selected")) {
r.firstElementChild.classList.remove("selected");
} else {
r.firstElementChild.classList.add("selected");
}
}
}
} else {
if (r.firstElementChild.classList.contains("selected")) {
r.firstElementChild.classList.remove("selected");
} else {
r.firstElementChild.classList.add("selected");
}
}
}
function lastHighlighted() {
let highlightedNos = rankedNoArray.filter(x => x.firstElementChild.classList.contains("selected"));
return highlightedNos;
}
#rank_flex_combo #ranked_nos,
#rank_flex_combo,
#ranked_no,
#ranked_no1,
#ranked_no2,
#ranked_no3,
#ranked_no4,
#ranked_no5,
#ranked_no6,
#ranked_no7,
#ranked_no8,
#ranked_no9,
#ranked_no10 {
display: flex;
flex-direction: row;
margin: 0em 0.5em;
}
#ranked_nos a,
#ranked_no1 a,
#ranked_no2 a,
#ranked_no3 a,
#ranked_no4 a,
#ranked_no5 a,
#ranked_no6 a,
#ranked_no7 a,
#ranked_no8 a,
#ranked_no9 a,
#ranked_no10 a {
font-weight: bold;
text-decoration: none;
padding: 0.25em 0.5em;
color: dodgerblue;
background-color: lightcyan;
border: 2px solid cyan;
border-radius: 5px;
}
#ranked_nos .selected,
#ranked_no1 .selected,
#ranked_no2 .selected,
#ranked_no3 .selected,
#ranked_no4 .selected,
#ranked_no5 .selected,
#ranked_no6 .selected,
#ranked_no7 .selected,
#ranked_no8 .selected,
#ranked_no9 .selected,
#ranked_no10 .selected {
color: mediumpurple;
background-color: lavender;
border: 2px solid mediumpurple;
}
#ranked_no a {
font-weight: bold;
text-decoration: none;
padding: 0.25em 2em;
color: dodgerblue;
background-color: white;
border: 2px solid cyan;
border-radius: 5px;
}
#ranked_no1 a:hover,
#ranked_no2 a:hover,
#ranked_no3 a:hover,
#ranked_no4 a:hover,
#ranked_no5 a:hover,
#ranked_no6 a:hover,
#ranked_no7 a:hover,
#ranked_no8 a:hover,
#ranked_no9 a:hover,
#ranked_no10 a:hover {
color: mediumpurple;
background-color: lavender;
border: 2px solid mediumpurple;
}
<div id="rank_flex_combo">
<div id="ranked_no">
Rank No.
</div>
<div id="ranked_no1">
1
</div>
<div id="ranked_no2">
2
</div>
<div id="ranked_no3">
3
</div>
<div id="ranked_no4">
4
</div>
<div id="ranked_no5">
5
</div>
<div id="ranked_no6">
6
</div>
<div id="ranked_no7">
7
</div>
<div id="ranked_no8">
8
</div>
<div id="ranked_no9">
9
</div>
<div id="ranked_no10">
10
</div>
</div>

You only need that:
const rankFlexCombo = document.getElementById('rank_flex_combo')
, rankedNo1 = document.querySelector('#rank_flex_combo > div#ranked_no1')
, rankedNoAll = document.querySelectorAll('#rank_flex_combo > div')
;
rankedNo1.classList.add('selected')
var OnSelect = rankedNo1
;
rankFlexCombo.onclick= e =>
{
if (!e.target.matches('#rank_flex_combo > div')) return
let rDiv = (e.target.id==='ranked_no') ? rankedNo1 : e.target;
rankedNoAll.forEach(d=>d.classList.remove('selected'))
if (rDiv===OnSelect)
{
// rankedNo1.classList.add('selected')
// OnSelect = rankedNo1 // for default selected
OnSelect = null
}
else
{
rDiv.classList.add('selected')
OnSelect = rDiv
}
}
#rank_flex_combo {
display: flex;
flex-direction: row;
}
#rank_flex_combo > div {
font-weight: bold;
padding: 0.25em 0.5em;
color: dodgerblue;
background-color: lightcyan;
border: 2px solid cyan;
border-radius: 5px;
margin: 0em 0.5em;
cursor: pointer;
}
#rank_flex_combo > div:hover,
#rank_flex_combo > div.selected {
color: mediumpurple;
background-color: lavender;
border: 2px solid mediumpurple;
}
<div id="rank_flex_combo">
<div id="ranked_no"> Rank No. </div>
<div id="ranked_no1"> 1 </div>
<div id="ranked_no2"> 2 </div>
<div id="ranked_no3"> 3 </div>
<div id="ranked_no4"> 4 </div>
<div id="ranked_no5"> 5 </div>
<div id="ranked_no6"> 6 </div>
<div id="ranked_no7"> 7 </div>
<div id="ranked_no8"> 8 </div>
<div id="ranked_no9"> 9 </div>
<div id="ranked_no10"> 10 </div>
</div>

Try this: [Works]
let rankedNo1 = document.querySelector("#ranked_no1");
let rankedNo2 = document.querySelector("#ranked_no2");
let rankedNo3 = document.querySelector("#ranked_no3");
let rankedNo4 = document.querySelector("#ranked_no4");
let rankedNo5 = document.querySelector("#ranked_no5");
let rankedNo6 = document.querySelector("#ranked_no6");
let rankedNo7 = document.querySelector("#ranked_no7");
let rankedNo8 = document.querySelector("#ranked_no8");
let rankedNo9 = document.querySelector("#ranked_no9");
let rankedNo10 = document.querySelector("#ranked_no10");
let rankedNoArray = [rankedNo1, rankedNo2, rankedNo3, rankedNo4, rankedNo5, rankedNo6, rankedNo7, rankedNo8, rankedNo9, rankedNo10];
rankedNo1.addEventListener("click", function() {
toggleHighlight(rankedNo1);
event.preventDefault();
});
rankedNo2.addEventListener("click", function() {
toggleHighlight(rankedNo2);
event.preventDefault();
});
rankedNo3.addEventListener("click", function() {
toggleHighlight(rankedNo3);
event.preventDefault();
});
rankedNo4.addEventListener("click", function() {
toggleHighlight(rankedNo4);
event.preventDefault();
});
rankedNo5.addEventListener("click", function() {
toggleHighlight(rankedNo5);
event.preventDefault();
});
rankedNo6.addEventListener("click", function() {
toggleHighlight(rankedNo6);
event.preventDefault();
});
rankedNo7.addEventListener("click", function() {
toggleHighlight(rankedNo7);
event.preventDefault();
});
rankedNo8.addEventListener("click", function() {
toggleHighlight(rankedNo8);
event.preventDefault();
});
rankedNo9.addEventListener("click", function() {
toggleHighlight(rankedNo9);
event.preventDefault();
});
rankedNo10.addEventListener("click", function() {
toggleHighlight(rankedNo10);
event.preventDefault();
});
function toggleHighlight(r) {
let highlighted = lastHighlighted();
if (highlighted && highlighted.length) {
for (let h of highlighted) {
if (h == r) {
r.firstElementChild.classList.remove("selected");
} else {
h.firstElementChild.classList.remove("selected");
if (r.firstElementChild.classList.contains("selected")) {
r.firstElementChild.classList.remove("selected");
} else {
r.firstElementChild.classList.add("selected");
}
}
i+=1;
}
} else {
r.firstElementChild.classList.add("selected");
}
}
function lastHighlighted() {
let highlightedNos = rankedNoArray.filter(x => x.firstElementChild.classList.contains("selected"));
return highlightedNos;
}
#rank_flex_combo #ranked_nos, #rank_flex_combo, #ranked_no,
#ranked_no1, #ranked_no2, #ranked_no3, #ranked_no4, #ranked_no5,
#ranked_no6, #ranked_no7, #ranked_no8, #ranked_no9, #ranked_no10 {
display: flex;
flex-direction: row;
margin: 0em 0.5em;
}
#ranked_nos a,
#ranked_no1 a, #ranked_no2 a, #ranked_no3 a, #ranked_no4 a, #ranked_no5 a,
#ranked_no6 a, #ranked_no7 a, #ranked_no8 a, #ranked_no9 a, #ranked_no10 a {
font-weight: bold;
text-decoration: none;
padding: 0.25em 0.5em;
color: dodgerblue;
background-color: lightcyan;
border: 2px solid cyan;
border-radius: 5px;
}
#ranked_nos .selected,
#ranked_no1 .selected, #ranked_no2 .selected, #ranked_no3 .selected, #ranked_no4 .selected,
#ranked_no5 .selected, #ranked_no6 .selected, #ranked_no7 .selected, #ranked_no8 .selected,
#ranked_no9 .selected, #ranked_no10 .selected {
color: mediumpurple;
background-color: lavender;
border: 2px solid mediumpurple;
}
#ranked_no a {
font-weight: bold;
text-decoration: none;
padding: 0.25em 2em;
color: dodgerblue;
background-color: white;
border: 2px solid cyan;
border-radius: 5px;
}
#ranked_no1 a:hover, #ranked_no2 a:hover, #ranked_no3 a:hover, #ranked_no4 a:hover, #ranked_no5 a:hover, #ranked_no6 a:hover, #ranked_no7 a:hover, #ranked_no8 a:hover, #ranked_no9 a:hover, #ranked_no10 a:hover {
color: mediumpurple;
background-color: lavender;
border: 2px solid mediumpurple;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rank_flex_combo">
<div id="ranked_no">
<a href="" >Rank No.</a>
</div>
<div id="ranked_no1">
1
</div>
<div id="ranked_no2">
2
</div>
<div id="ranked_no3">
3
</div>
<div id="ranked_no4">
4
</div>
<div id="ranked_no5">
5
</div>
<div id="ranked_no6">
6
</div>
<div id="ranked_no7">
7
</div>
<div id="ranked_no8">
8
</div>
<div id="ranked_no9">
9
</div>
<div id="ranked_no10">
10
</div>
</div>

Related

Javascripts multiple choice onclick modify all questions

I build this multiple choice questions but not in quiz format. I have in the page an sequence of divs with questions and each question have their own choices and check button, so they are independent and free for the users to respond one, all or none. I made the content (questions and answers) wrote directly on HTML file because I have others working with me and they have only contact with the HTML files to implement some classes.
My problem is that I made one question and it's working, but when a duplicated the div with another question the interaction affects all the divs. For exemple:
when you select an option, the check button turns from disable to enable, but if you select an option from the second question, the check button from the first question change.
if you want to interact with two question in the same time, when you select an option in the first question, when you select an option in the second question on the first that you selected turns unselected.
So I want to make each div with question be independent, in a way that we can create as many questions as we want.
I created this https://jsfiddle.net/1yLwrcek/2/
let mcqCard = document.querySelectorAll('.mcq-card');
let answerOption = document.querySelectorAll('.mcq__answers li');
let submitButton = document.querySelector('.mcq__submit button');
let submitFeedback = document.querySelector('.mcq__submit--feedback');
let score = 0;
(function () {
// Select option, clear the others and enable submit
answerOption.forEach(option => {
option.addEventListener('click', function () {
console.log(submitButton.getAttribute('type'));
answerSelect(option);
});
});
//Submit button to check only selected class option.
submitButton.addEventListener('click', function () {
if (submitButton.getAttribute('type') === 'submit' && submitButton.getAttribute('aria-disabled') === 'false') {
butttonCheck();
} else {
buttonReset();
}
});
})();
function answerSelect(e) {
if (submitButton.getAttribute('type') === 'submit') {
for (let i = 0; i < answerOption.length; i++) {
const element = answerOption[i];
element.classList.remove('mcq__answers--selected');
}
e.classList.add('mcq__answers--selected');
submitButton.setAttribute('aria-disabled', 'false');
}
}
function incorrectAnswer(event) {
event.classList.remove('mcq__answers--selected');
event.classList.add('mcq__answers--incorrect');
submitFeedback.innerHTML = `<span class="material-symbols-rounded">cancel</span>Resposta errada! <br class="d-lg-none" />Tente novamente.`;
submitFeedback.classList.remove('d-none', 'mcq__submit__feedback--correct');
submitFeedback.classList.add('mcq__submit__feedback--incorrect');
}
function correctAnswer(event) {
event.classList.remove('mcq__answers--selected');
event.classList.add('mcq__answers--correct');
submitFeedback.innerHTML = `<span class="material-symbols-rounded">check_circle</span>Resposta correta! <br class="d-lg-none" />Você acertou em ${score} tentativa(s).`;
submitFeedback.classList.remove('d-none', 'mcq__submit__feedback--incorrect');
submitFeedback.classList.add('mcq__submit__feedback--correct');
}
function blockAnswerOption() {
for (let i = 0; i < answerOption.length; i++) {
const element = answerOption[i];
element.classList.add('mcq__answers--blocked');
}
}
function butttonCheck() {
if (submitButton.getAttribute('type') === 'submit') {
score++;
for (let i = 0; i < answerOption.length; i++) {
const element = answerOption[i];
if (element.classList.contains('mcq__answers--selected')) {
if (!element.hasAttribute('correct')) {
incorrectAnswer(element);
blockAnswerOption();
} else {
correctAnswer(element);
blockAnswerOption();
}
}
}
submitButton.setAttribute('type', 'reset');
submitButton.innerHTML = 'Reset';
}
}
function buttonReset() {
if (submitButton.getAttribute('type') === 'reset') {
for (let i = 0; i < answerOption.length; i++) {
const element = answerOption[i];
element.classList.remove('mcq__answers--correct', 'mcq__answers--incorrect', 'mcq__answers--blocked', 'mcq__answers--selected');
submitButton.setAttribute('type', 'submit');
submitButton.innerHTML = 'Check';
submitButton.setAttribute('aria-disabled', 'true');
}
if (submitFeedback.classList.contains('mcq__submit__feedback--correct')) {
score = 0;
}
submitFeedback.classList.remove('mcq__submit__feedback--correct', 'mcq__submit__feedback--incorrect');
submitFeedback.classList.add('d-none');
}
}
:root {
/* Colors */
--primary-color: #d27f7d;
--primary-color-light: #ee9b9a;
--primary-color-dark: #bb6564;
--secondary-color: #8a6580;
--secondary-color-extra-light: #fae9f5;
--secondary-color-light: #c28cb4;
--secondary-color-dark: #5a3751;
--text-color: #1e1e1e;
--text-color-light: #535658;
--color-dark: #1e1e1e;
--color-light: #eef2f6;
--color-light-hover: #e6e6e625;
}
.mcq-card {
padding: 0px 30px;
}
.mcq-card .mcq__question {
padding: 30px 0;
border-bottom: 1px solid var(--secondary-color-light);
font-family: 'DM Sans Bold', sans-serif;
font-size: 1.25rem;
}
/* Answers List */
.mcq-card .mcq__answers {
padding: 30px 0;
}
.mcq-card .mcq__answers ul {
list-style-type: none;
margin: 0;
}
.mcq-card .mcq__answers ul li {
padding: 10px 20px;
margin-bottom: 20px;
border: 2px solid var(--primary-color-light);
border-radius: 8px;
cursor: pointer;
font-size: 1rem;
transition: 0.1s;
}
.mcq-card .mcq__answers ul li:last-child {
margin-bottom: 0;
}
.mcq-card .mcq__answers ul li:not(.mcq__answers--blocked, .mcq__answers--selected, .mcq__answers--correct, .mcq__answers--incorrect):hover {
border-color: var(--primary-color-dark);
/* background-color: var(--color-light-hover); */
}
.mcq-card .mcq__answers ul li.mcq__answers--selected {
background-color: var(--secondary-color-extra-light);
border-color: var(--secondary-color-light);
color: var(--secondary-color-dark);
}
.mcq-card .mcq__answers ul li.mcq__answers--correct {
background-color: #c0ffce;
border-color: #28a745;
color: #014811;
cursor: not-allowed;
}
.mcq-card .mcq__answers ul li.mcq__answers--incorrect {
background-color: #ffc5cb;
border-color: #dc3545;
color: #81000c;
cursor: not-allowed;
}
.mcq-card .mcq__answers ul li.mcq__answers--blocked:not(.mcq__answers--correct, .mcq__answers--incorrect) {
cursor: not-allowed;
border-color: var(--color-light);
color: var(--text-color-light);
}
/* Submit Button */
.mcq-card .mcq__submit {
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
padding: 30px 0;
border-top: 1px solid var(--secondary-color-light);
}
.mcq-card .mcq__submit button[aria-disabled='true'] {
background-color: #909599;
border-color: #909599;
cursor: not-allowed;
}
/* Feedback mensage */
.mcq-card .mcq__submit .mcq__submit--feedback {
font-family: 'DM Sans Bold', sans-serif;
margin-left: 20px;
line-height: 1.2;
}
.mcq-card .mcq__submit .mcq__submit--feedback .material-symbols-rounded {
font-weight: 700;
margin-right: 10px;
}
.mcq-card .mcq__submit .mcq__submit--feedback.mcq__submit__feedback--correct {
display: block !important;
color: #28a745;
}
.mcq-card .mcq__submit .mcq__submit--feedback.mcq__submit__feedback--incorrect {
display: block !important;
color: #dc3545;
}
<div class="mcq-card card shadow round border-0">
<div class="mcq__question">1. Question</div>
<div class="mcq__answers">
<ul>
<li tabindex="0">Option 1</li>
<li tabindex="0">Option 2</li>
<li tabindex="0" correct>Option 3</li>
</ul>
</div>
<div class="mcq__submit">
<button class="button-primary" aria-disabled="true" type="submit">Check</button>
<span class="d-none mcq__submit--feedback"></span>
</div>
</div>
<div class="mcq-card card shadow round border-0">
<div class="mcq__question">2. Question</div>
<div class="mcq__answers">
<ul>
<li tabindex="0">Option 1</li>
<li tabindex="0">Option 2</li>
<li tabindex="0" correct>Option 3</li>
</ul>
</div>
<div class="mcq__submit">
<button class="button-primary" aria-disabled="true" type="submit">Check</button>
<span class="d-none mcq__submit--feedback"></span>
</div>
</div>
Thanks

Because each question has exact same structure, you'll need either assign an unique ID for each or go by its index.
But most simple solution is to query each element of each question separately:
let mcqCard = document.querySelectorAll('.mcq-card');
let score = 0;
(function () {
mcqCard.forEach(mcq =>
{
let answerOption = mcq.querySelectorAll('.mcq__answers li');
let submitButton = mcq.querySelector('.mcq__submit button');
let submitFeedback = mcq.querySelector('.mcq__submit--feedback');
// Select option, clear the others and enable submit
answerOption.forEach(option => {
option.addEventListener('click', function () {
console.log(submitButton.getAttribute('type'));
answerSelect(option, submitButton, answerOption);
});
});
//Submit button to check only selected class option.
submitButton.addEventListener('click', function () {
if (submitButton.getAttribute('type') === 'submit' && submitButton.getAttribute('aria-disabled') === 'false') {
butttonCheck();
} else {
buttonReset();
}
});
function answerSelect(e, submitButton) {
if (submitButton.getAttribute('type') === 'submit') {
for (let i = 0; i < answerOption.length; i++) {
const element = answerOption[i];
element.classList.remove('mcq__answers--selected');
}
e.classList.add('mcq__answers--selected');
submitButton.setAttribute('aria-disabled', 'false');
}
}
function incorrectAnswer(event) {
event.classList.remove('mcq__answers--selected');
event.classList.add('mcq__answers--incorrect');
submitFeedback.innerHTML = `<span class="material-symbols-rounded">cancel</span>Resposta errada! <br class="d-lg-none" />Tente novamente.`;
submitFeedback.classList.remove('d-none', 'mcq__submit__feedback--correct');
submitFeedback.classList.add('mcq__submit__feedback--incorrect');
}
function correctAnswer(event) {
event.classList.remove('mcq__answers--selected');
event.classList.add('mcq__answers--correct');
submitFeedback.innerHTML = `<span class="material-symbols-rounded">check_circle</span>Resposta correta! <br class="d-lg-none" />Você acertou em ${score} tentativa(s).`;
submitFeedback.classList.remove('d-none', 'mcq__submit__feedback--incorrect');
submitFeedback.classList.add('mcq__submit__feedback--correct');
}
function blockAnswerOption() {
for (let i = 0; i < answerOption.length; i++) {
const element = answerOption[i];
element.classList.add('mcq__answers--blocked');
}
}
function butttonCheck() {
if (submitButton.getAttribute('type') === 'submit') {
score++;
for (let i = 0; i < answerOption.length; i++) {
const element = answerOption[i];
if (element.classList.contains('mcq__answers--selected')) {
if (!element.hasAttribute('correct')) {
incorrectAnswer(element);
blockAnswerOption();
} else {
correctAnswer(element);
blockAnswerOption();
}
}
}
submitButton.setAttribute('type', 'reset');
submitButton.innerHTML = 'Reset';
}
}
function buttonReset() {
if (submitButton.getAttribute('type') === 'reset') {
for (let i = 0; i < answerOption.length; i++) {
const element = answerOption[i];
element.classList.remove('mcq__answers--correct', 'mcq__answers--incorrect', 'mcq__answers--blocked', 'mcq__answers--selected');
submitButton.setAttribute('type', 'submit');
submitButton.innerHTML = 'Check';
submitButton.setAttribute('aria-disabled', 'true');
}
if (submitFeedback.classList.contains('mcq__submit__feedback--correct')) {
score = 0;
}
submitFeedback.classList.remove('mcq__submit__feedback--correct', 'mcq__submit__feedback--incorrect');
submitFeedback.classList.add('d-none');
}
}
});
})();
:root {
/* Colors */
--primary-color: #d27f7d;
--primary-color-light: #ee9b9a;
--primary-color-dark: #bb6564;
--secondary-color: #8a6580;
--secondary-color-extra-light: #fae9f5;
--secondary-color-light: #c28cb4;
--secondary-color-dark: #5a3751;
--text-color: #1e1e1e;
--text-color-light: #535658;
--color-dark: #1e1e1e;
--color-light: #eef2f6;
--color-light-hover: #e6e6e625;
}
.mcq-card {
padding: 0px 30px;
}
.mcq-card .mcq__question {
padding: 30px 0;
border-bottom: 1px solid var(--secondary-color-light);
font-family: 'DM Sans Bold', sans-serif;
font-size: 1.25rem;
}
/* Answers List */
.mcq-card .mcq__answers {
padding: 30px 0;
}
.mcq-card .mcq__answers ul {
list-style-type: none;
margin: 0;
}
.mcq-card .mcq__answers ul li {
padding: 10px 20px;
margin-bottom: 20px;
border: 2px solid var(--primary-color-light);
border-radius: 8px;
cursor: pointer;
font-size: 1rem;
transition: 0.1s;
}
.mcq-card .mcq__answers ul li:last-child {
margin-bottom: 0;
}
.mcq-card .mcq__answers ul li:not(.mcq__answers--blocked, .mcq__answers--selected, .mcq__answers--correct, .mcq__answers--incorrect):hover {
border-color: var(--primary-color-dark);
/* background-color: var(--color-light-hover); */
}
.mcq-card .mcq__answers ul li.mcq__answers--selected {
background-color: var(--secondary-color-extra-light);
border-color: var(--secondary-color-light);
color: var(--secondary-color-dark);
}
.mcq-card .mcq__answers ul li.mcq__answers--correct {
background-color: #c0ffce;
border-color: #28a745;
color: #014811;
cursor: not-allowed;
}
.mcq-card .mcq__answers ul li.mcq__answers--incorrect {
background-color: #ffc5cb;
border-color: #dc3545;
color: #81000c;
cursor: not-allowed;
}
.mcq-card .mcq__answers ul li.mcq__answers--blocked:not(.mcq__answers--correct, .mcq__answers--incorrect) {
cursor: not-allowed;
border-color: var(--color-light);
color: var(--text-color-light);
}
/* Submit Button */
.mcq-card .mcq__submit {
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
padding: 30px 0;
border-top: 1px solid var(--secondary-color-light);
}
.mcq-card .mcq__submit button[aria-disabled='true'] {
background-color: #909599;
border-color: #909599;
cursor: not-allowed;
}
/* Feedback mensage */
.mcq-card .mcq__submit .mcq__submit--feedback {
font-family: 'DM Sans Bold', sans-serif;
margin-left: 20px;
line-height: 1.2;
}
.mcq-card .mcq__submit .mcq__submit--feedback .material-symbols-rounded {
font-weight: 700;
margin-right: 10px;
}
.mcq-card .mcq__submit .mcq__submit--feedback.mcq__submit__feedback--correct {
display: block !important;
color: #28a745;
}
.mcq-card .mcq__submit .mcq__submit--feedback.mcq__submit__feedback--incorrect {
display: block !important;
color: #dc3545;
}
<div class="mcq-card card shadow round border-0">
<div class="mcq__question">1. Question</div>
<div class="mcq__answers">
<ul>
<li tabindex="0">Option 1</li>
<li tabindex="0">Option 2</li>
<li tabindex="0" correct>Option 3</li>
</ul>
</div>
<div class="mcq__submit">
<button class="button-primary" aria-disabled="true" type="submit">Check</button>
<span class="d-none mcq__submit--feedback"></span>
</div>
</div>
<div class="mcq-card card shadow round border-0">
<div class="mcq__question">2. Question</div>
<div class="mcq__answers">
<ul>
<li tabindex="0">Option 1</li>
<li tabindex="0">Option 2</li>
<li tabindex="0" correct>Option 3</li>
</ul>
</div>
<div class="mcq__submit">
<button class="button-primary" aria-disabled="true" type="submit">Check</button>
<span class="d-none mcq__submit--feedback"></span>
</div>
</div>

Javascript Blur background when div is block?

I'm having a problem with bluring the background when my menu is open. I tried writing something on my own but it's not working.
function backgroundBlur() {
var menuBox = document.getElementById("mobile-menu");
var blur = document.getElementById("body");
if (menuBox.style.dsiplay = "block") {
blur.style.filter = "blur(3px)";
}
}

I think the problem can be caused by three reasons:
Typo noted by #RyanWalls
The backgroundBlur() method is not called
The display property of the menuBox is not block
I made a run to simulate this event:
let button = document.getElementById('setBlur');
let control = false;
function backgroundBlur(control) {
var menuBox = document.getElementById("mobile-menu");
var blur = document.getElementById("body");
if (menuBox.style.display === "block")
{
if(!control)
{
blur.style.filter = "blur(3px)";
button.innerHTML = 'Remove Blur';
}
else
{
blur.style.filter = "blur(0px)";
button.innerHTML = 'Add Blur';
}
}
}
button.addEventListener('click', function() {
backgroundBlur(control);
control = !control;
});
*{
margin: 0;
}
#body{
background-color: black;
}
button{
margin-top: 25px;
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
width: 100%;
}
.vertical-menu {
width: 200px;
}
.vertical-menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
}
.vertical-menu a:hover {
background-color: #ccc;
}
.vertical-menu a.active {
background-color: #04AA6D;
color: white;
}
<div id="body">
<div id="mobile-menu" style="display: block;">
<div class="vertical-menu">
Home
Link 1
</div>
</div>
</div>
<button id="setBlur">Add Blur</button>

How to control the span characteristics based on given data

The following HTML code creates 3 elements, and allows the user to click on them / select them.
const changeColor = (evt) => {
if (evt.currentTarget.classList.contains("is-active")) {
evt.currentTarget.classList.remove("is-active");
} else {
evt.currentTarget.classList.add("is-active");
}
};
const EL_tagger1010_children = document.querySelectorAll(".tagger1010 span");
EL_tagger1010_children.forEach(EL => EL.addEventListener("click", changeColor));
.tagger1010 span {
padding: 6px 10px;
background: #D0E8E4;
border-radius: 18px;
color: #000000;
font-family: Roboto;
font-size: 12px;
margin: 0 4px 8px 0;
font-weight: 500;
display: inline-block;
word-wrap: break-word;
white-space: normal;
cursor: pointer;
user-select: none;
border: 1px solid BBD0CD;
}
.tagger1010 span.is-active {
background-color: #008fde;
color: #ffffff;
}
.tagger1010 span:hover {
background-color: #008fde;
color: #ffffff;
}
<div class="tagger1010">
<span>Google</span>
<span>Microsoft</span>
<span>Facebook</span>
<span>LinkedIn</span>
</div>
<div class="as-console-wrapper"></div>
<div class="as-console"></div>
What I am looking to do is pre-assign spans as "is-active" if the tag is included in a given list.
For example, if you run the above code, and the given list includes "Microsoft" and "LinkedIn" - I would like for "Microsoft" and "LinkedIn" to already be highlighted and have the background-color be #008fde, and the color be #ffffff.
Would anyone know how I could say, "if the text of this span is included in this list, make it have the is-active characteristics"

Checkout here
https://jsfiddle.net/qmx3105s/
<script type="text/javascript">
const changeColor = (evt) => {
if (evt.currentTarget.classList.contains("is-active")){
evt.currentTarget.classList.remove("is-active");
localStorage.removeItem(evt.currentTarget.textContent);
} else {
evt.currentTarget.classList.add("is-active");
localStorage.setItem(evt.currentTarget.textContent,'true');
}
};
const EL_tagger1010_children = document.querySelectorAll(".tagger1010 span");
EL_tagger1010_children.forEach(EL => {
console.log('EL',EL)
if(localStorage.getItem(EL.textContent)){
EL.classList.add("is-active");
}
EL.addEventListener("click", changeColor);
});
</script>

Edited: Search by innerText and Find in Array added.
Original: I highly recommend adding id="X" to your html to make it easier to target the specific tag. Having to rely on the inner text is much more complicated and bad practice.
Then you need an array to hold your IDs and iterate it. Finally we add the .is-active
Here's what that looks like:
const changeColor = (evt) => {
if (evt.currentTarget.classList.contains("is-active")) {
evt.currentTarget.classList.remove("is-active");
} else {
evt.currentTarget.classList.add("is-active");
}
};
const EL_tagger1010_children = document.querySelectorAll(".tagger1010 span");
EL_tagger1010_children.forEach(EL => EL.addEventListener("click", changeColor));
var tag_names = ["Microsoft", "LinkedIn"];
var tags = document.getElementsByTagName("span");
for (var i = 0; i < tags.length; i++) {
if(tag_names.indexOf( tags[i].textContent ) != -1){
tags[i].classList.add('is-active');
}
}
.tagger1010 span {
padding: 6px 10px;
background: #D0E8E4;
border-radius: 18px;
color: #000000;
font-family: Roboto;
font-size: 12px;
margin: 0 4px 8px 0;
font-weight: 500;
display: inline-block;
word-wrap: break-word;
white-space: normal;
cursor: pointer;
user-select: none;
border: 1px solid BBD0CD;
}
.tagger1010 span.is-active {
background-color: #008fde;
color: #ffffff;
}
.tagger1010 span:hover {
background-color: #008fde;
color: #ffffff;
}
<div class="tagger1010">
<span>Google</span>
<span>Microsoft</span>
<span>Facebook</span>
<span>LinkedIn</span>
</div>
<div class="as-console-wrapper"></div>
<div class="as-console"></div>

Search/Filter Dropdown Javascript

I'm following this guide to create Search/Filter Dropdown.
But I have this method 'allNameMuseums()', that returns an array of names (for example :
array = ["Jack", "Paul", "George"]
My JS code :
async function allNameMuseums() {
let nomeFile = "dati_musei_infovis.csv";
let data3 = await d3.dsv(";", nomeFile, function (d) {
return {
Museo: d.Museo,
Ingresso: d.Ingresso,
Anno: d.Anno,
Mese: d.Mese,
Visitatori: d.Visitatori
};
});
return filtraggioNomeMuseo(data3);
};
function filtraggioNomeMuseo(data) {
array_filtrato = [];
var map = {};
//var visitatori = 0;
for (i=0; i<data.length; i++) {
if (!(array_filtrato.includes(data[i].Museo))) {
array_filtrato.push(data[i].Museo)
}
}
return array_filtrato;
}
I want to put these names instead of About, Base, Blog etc...

You could loop through the returned array and append the names as anchors to the dropdown like :
document.addEventListener("DOMContentLoaded", function(event) {
allNameMuseums().forEach(function(item){
document.getElementById("myDropdown").innerHTML += ''+item+'';
})
});
NOTE: Put your code inside DOMContentLoaded event listener to make sure all the DOM elements are loaded before executing your code/
Working sample:
document.addEventListener("DOMContentLoaded", function(event) {
allNameMuseums().forEach(function(item) {
document.getElementById("myDropdown").innerHTML += '' + item + '';
})
});
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
function allNameMuseums() {
return ["Jack", "Paul", "George"];
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
border-box: box-sizing;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
#myInput:focus {
outline: 3px solid #ddd;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<h2>Search/Filter Dropdown</h2>
<p>Click on the button to open the dropdown menu, and use the input field to search for a specific dropdown link.</p>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
</div>
</div>

Dropdown Menus closing when clicking inside of container

When I click inside of the dropdown menus, they close.
This occurs at Login menu and nav bar.
Im not too awfully experienced at webdeveloping but I know that its probably just some dumb error Ive overlooked a million times today.
I believe the error is in this part of the code (expanded bellow):
if (e.isDefaultPrevented()) return
$this.attr('aria-expanded', 'false')
$parent.removeClass('open').trigger('ontouchstart', relatedTarget)
Can be seen at zunelex.com
var backdrop = '.dropdown-backdrop'
var toggle = '[data-toggle="dropdown"]'
var Dropdown = function (element) {
$(element).on('click.bs.dropdown', this.toggle)
}
Dropdown.VERSION = '3.3.4'
Dropdown.prototype.toggle = function (e) {
var $this = $(this)
if ($this.is('.disabled, :disabled')) return
var $parent = getParent($this)
var isActive = $parent.hasClass('open')
clearMenus()
if (!isActive) {
if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
// if mobile we use a backdrop because click events don't delegate
$('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
}
var relatedTarget = { relatedTarget: this }
$parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))
if (e.isDefaultPrevented()) return
$this
.trigger('focus')
.attr('aria-expanded', 'true')
$parent
.toggleClass('open')
.trigger('shown.bs.dropdown', relatedTarget)
}
return false
}
Dropdown.prototype.keydown = function (e) {
if (!/(38|40|27|32)/.test(e.which) || /input|textarea/i.test(e.target.tagName)) return
var $this = $(this)
e.preventDefault()
e.stopPropagation()
if ($this.is('.disabled, :disabled')) return
var $parent = getParent($this)
var isActive = $parent.hasClass('open')
if ((!isActive && e.which != 27) || (isActive && e.which == 27)) {
if (e.which == 27) $parent.find(toggle).trigger('focus')
return $this.trigger('click')
}
var desc = ' li:not(.disabled):visible a'
var $items = $parent.find('[role="menu"]' + desc + ', [role="listbox"]' + desc)
if (!$items.length) return
var index = $items.index(e.target)
if (e.which == 38 && index > 0) index-- // up
if (e.which == 40 && index < $items.length - 1) index++ // down
if (!~index) index = 0
$items.eq(index).trigger('focus')
}
function clearMenus(e) {
if (e && e.which === 3) return
$(backdrop).remove()
$(toggle).each(function () {
var $this = $(this)
var $parent = getParent($this)
var relatedTarget = { relatedTarget: this }
if (!$parent.hasClass('open')) return
$parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
if (e.isDefaultPrevented()) return
$this.attr('aria-expanded', 'false')
$parent.removeClass('open').trigger('ontouchstart', relatedTarget)
})
}
function getParent($this) {
var selector = $this.attr('data-target')
if (!selector) {
selector = $this.attr('href')
selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
}
var $parent = selector && $(selector)
return $parent && $parent.length ? $parent : $this.parent()
}
// DROPDOWN PLUGIN DEFINITION
// ==========================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.dropdown')
if (!data) $this.data('bs.dropdown', (data = new Dropdown(this)))
if (typeof option == 'string') data[option].call($this)
})
}
var old = $.fn.dropdown
$.fn.dropdown = Plugin
$.fn.dropdown.Constructor = Dropdown
// DROPDOWN NO CONFLICT
// ====================
$.fn.dropdown.noConflict = function () {
$.fn.dropdown = old
return this
}
// APPLY TO STANDARD DROPDOWN ELEMENTS
// ===================================
$(document)
.on('click.bs.dropdown.data-api', clearMenus)
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
.on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '[role="menu"]', Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '[role="listbox"]', Dropdown.prototype.keydown)
.dropdown {
position: relative;
}
.dropdown-toggle:focus {
outline: 0;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.dropdown-menu.pull-right {
right: 0;
left: auto;
}
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
color: #fff;
text-decoration: none;
background-color: #337ab7;
outline: 0;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
color: #777;
}
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.open > .dropdown-menu {
display: block !important;
visibility: visible;
}
.open > a {
outline: 0;
}
.dropdown-menu-right {
right: 0;
left: auto;
}
.dropdown-menu-left {
right: auto;
left: 0;
}
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #777;
white-space: nowrap;
}
.dropdown-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 990;
}
.pull-right > .dropdown-menu {
right: 0;
left: auto;
}
.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
content: "";
border-top: 0;
border-bottom: 4px solid;
}
.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 2px;
}
#media (min-width: 768px) {
.navbar-right .dropdown-menu {
right: 0;
left: auto;
}
.navbar-right .dropdown-menu-left {
right: auto;
left: 0;
}
}
<div class="dropdown-menu" style="padding: 15px;>
<form class="form-horizontal" method="post" accept-charset="UTF-8">
<input id="sp_uname" class="form-control login" type="text" name="sp_uname" placeholder="Username.." />
<input id="sp_pass" class="form-control login" type="password" name="sp_pass" placeholder="Password.."/>
<input class="btn btn-primary" type="submit" name="submit" value="login" />
</form>
</li>
</ul>
</ul>
</div>

Your html is invalid, the style attribute requires an opening AND closing quotation mark to be valid.
Essentially your style attribute keeps reading characters until it decides it has a reason to stop so:
padding: 15px;>
And then everything after that just gets really messed up.

We Keep Coding

JavaScript is the programming language of the Web.

JavaScript - Can't deselect a button without causing the page to reload - javascript

Related

Javascripts multiple choice onclick modify all questions

Javascript Blur background when div is block?

How to control the span characteristics based on given data

Search/Filter Dropdown Javascript

Dropdown Menus closing when clicking inside of container

Categories

Resources