Develop Reference

How to show images based upon which button is selected

I have created 4 buttons in my HTML file.
I have an object in my JavaScript file named products created using curly brackets {}.
Within this object, I have an Array named data created using square brackets [].
Within this Array, I have a number of different objects created using curly brackets {}.
Each of the objects within the Array are displayed correctly. I now want to create a filter, which will only show certain objects within the Array, depending on which button is pressed.
In my HTML file, I have this code:
<div id="buttons">
<button id="all" class="button-value" onclick="filterProduct('all')">All</button>
<button id="product1" class="button-value" onclick="filterProduct('product1')">Product 1</button>
<button id="product2" class="button-value" onclick="filterProduct('product2')">Product 2</button>
<button id="product3" class="button-value" onclick="filterProduct('product3')">product3</button>
</div>
In my CSS file, I have this code:
.hide {
display: none;
}
The object I have created in JavaScript:
let products = {
data: [
{
productName: "Item 1",
category: "product1",
price: "30",
image: "image-of-the-product-1.jpg",
},
{
productName: "Item 2",
category: "product2",
price: "49",
image: "image-of-the-product-2.jpg",
},
{
productName: "Item 3",
category: "product3",
price: "99",
image: "image-of-the-product-3.jpg",
},
]
}
The filterProduct function in JavaScript:
// Parameter passed from button (Parameter same as category)
function filterProduct(value) {
// Select all elements
let elements = document.querySelectorAll(".card");
// Loop through the elements
elements.forEach((element) => {
// Display all cards on all button click
if (value == "all") {
element.classList.remove("hide");
} else {
// Check if element contains category class
if (element.classList.contains(value)) {
// Display elements based on category
element.classList.remove("hide");
} else {
// Hide other elements
element.classList.add("hide");
}
}
});
}
If the user clicks on the button with the product1 filter, only products with the category of product1 should show up. If the user clicks on a button with the product2 filter, only products with the category of product2 should show up. If the user clicks on the button with the product3 filter, only products with the category of product3 should show up. If the user clicks on the All button, all the products should be shown.

Here you can find Working demo
DEMO
I have added my own card as of now but you can change this acording your necessity.

let products = {
data: [{
productName: "Item 1",
category: "product1",
price: "30",
image: "https://via.placeholder.com/200x200",
},
{
productName: "Item 2",
category: "product2",
price: "49",
image: "https://via.placeholder.com/400x400",
},
{
productName: "Item 3",
category: "product3",
price: "99",
image: "https://via.placeholder.com/350x150",
},
{
productName: "Item 3",
category: "all",
price: "99",
image: "https://via.placeholder.com/200x100",
},
]
}
function filterAllProduct(value) {
console.clear();
let a = [];
var container = document.getElementById("displayImage");
let list = container.classList;
list.add("uicomponent-panel-controls-container");
for (var i = 0; i < products.data.length; i++) {
container.innerHTML += '<img src=' + products.data[i]['image'] + ' />';
}
}
function filterProduct(value) {
console.clear();
var newArray = products.data.filter(function(item) {
return item.category == value;
})[0];
var html = [
'<div class="uicomponent-panel-controls-container">',
'<img src=' + newArray.image + '>',
'</div>'
].join('\n');
document.getElementById("displayImage").innerHTML = html;
}
.hide {
display: none;
}
<div id="buttons">
<button id="all" class="button-value" onclick="filterAllProduct('all')">All</button>
<button id="product1" class="button-value" onclick="filterProduct('product1')">Product 1</button>
<button id="product2" class="button-value" onclick="filterProduct('product2')">Product 2</button>
<button id="product3" class="button-value" onclick="filterProduct('product3')">product3</button>
</div>
<div id="displayImage"></div>
let products = {
data: [{
productName: "Item 1",
category: "product1",
price: "30",
image: "https://via.placeholder.com/200x200",
},
{
productName: "Item 2",
category: "product2",
price: "49",
image: "https://via.placeholder.com/200x100",
},
{
productName: "Item 3",
category: "product3",
price: "99",
image: "https://via.placeholder.com/200x100",
},
{
productName: "All",
category: "all",
price: "100",
image: "https://via.placeholder.com/400x400",
},
]
}
var getSelectedValue = '';
var html = '';
function filterProduct(value) {
getSelectedValue = value;
var image1 = '';
switch (value) {
case 'all':
image1 = 'https://via.placeholder.com/200x100';
html = [
'<div class="uicomponent-panel-controls-container">',
'<img src=' + products.data[0]['image'] + '> <span>' + products.data[0]['price'] + '</span> \n',
'<img src=' + products.data[1]['image'] + '> <span>' + products.data[1]['price'] + '</span> \n',
'<img src=' + products.data[2]['image'] + '> <span>' + products.data[2]['price'] + '</span> \n',
'</div>'
].join('\n');
break;
case 'product1':
image1 = 'https://via.placeholder.com/200x200';
html = [
'<div class="uicomponent-panel-controls-container">',
'<img src=' + image1 + '> ',
'</div>'
].join('\n');
break;
case 'product2':
image1 = 'https://via.placeholder.com/400x400';
html = [
'<div class="uicomponent-panel-controls-container">',
'<img src=' + image1 + '>',
'</div>'
].join('\n');
break;
case 'product3':
image1 = 'https://via.placeholder.com/350x150';
html = [
'<div class="uicomponent-panel-controls-container">',
'<img src=' + image1 + '>',
'</div>'
].join('\n');
break;
default:
// default code block
}
if (getSelectedValue == 'all') {
}
document.getElementById("displayImage").innerHTML = html;
}
.hide {
display: none;
}
<div id="buttons">
<button id="all" class="button-value" onclick="filterProduct('all')">All</button>
<button id="product1" class="button-value" onclick="filterProduct('product1')">Product 1</button>
<button id="product2" class="button-value" onclick="filterProduct('product2')">Product 2</button>
<button id="product3" class="button-value" onclick="filterProduct('product3')">product3</button>
</div>
<div id="displayImage"></div>
If Data is static then you can use switch case this is how you can display image according button click
If Data is dynamic and you are not able to map that you can use filter to map that data

How to display a new screen value when button is clicked in javascript

I am trying to create a page to add a new user when click into a value on menu bar like an Add option that allows users to input a name, an office number, and a phone number
Here is my code:
let menu = ["View", "Add", "Verify", "Update", "Delete"];
let list = document.getElementById("menuList");
menu.forEach((item) => {
let li = document.createElement("li");
li.innerText = item;
list.appendChild(li);
});
let users = [
{ name: "Jan", id: "1", number: "111-111-111" },
{ name: "Juan", id: "2", number: "222-222-222" },
{ name: "Margie", id: "3", number: "333-333-333" },
{ name: "Sara", id: "4", number: "444-444-444" },
{ name: "Tyrell", id: "5", number: "555-555-555" },
];
var div = "<div class='infor'>";
for (var i = 0; i < users.length; i++) {
div += "<div class='user-informations'>";
div += "<p>" + users[i].name + "</p>";
div += "<p>" + users[i].id + "</p>";
div += "<p>" + users[i].number + "</p>";
div += "</div>";
}
div += "</div>";
document.getElementById("usersList").innerHTML = div;
<div class="contact-container">
<div class="navbar">
<ul id="menuList">
<img src="https://img.icons8.com/ios-filled/50/000000/contact-card.png"/>
</ul>
</div>
<div class="users" id="usersList">
</div>
</div>
my project:

Paying no attention to style or good software engineering practices:
let usersList = document.getElementById("usersList"),
addPage = document.getElementById("addPage");
const users = [
{ name: "Jan", id: "1", number: "111-111-111" },
{ name: "Juan", id: "2", number: "222-222-222" },
{ name: "Margie", id: "3", number: "333-333-333" },
{ name: "Sara", id: "4", number: "444-444-444" },
{ name: "Tyrell", id: "5", number: "555-555-555" },
];
function showUsers() {
usersList.innerHTML = "";
usersList.style.display = "inline";
addPage.style.display = "none";
users.forEach(u => {
const newUser = document.createElement("p");
newUser.innerHTML = `${u.id} ${u.name}<br/>${u.number}`;
usersList.appendChild(newUser);
})
}
function addOn() {
usersList.style.display = "none";
addPage.style.display = "inline";
}
function addUser() {
const id = document.getElementById("id").value;
const name = document.getElementById("name").value;
const number = document.getElementById("number").value;
users.unshift({ name: name, id: id, number: number});
showUsers();
}
showUsers();
.navbar { vertical-align: top; padding-right: 1rem; border-right:solid 1px red }
<div class="contact-container">
<table>
<tr>
<td class="navbar">
<ul id="menuList" style="cursor:pointer">
<img src="https://img.icons8.com/ios-filled/50/000000/contact-card.png" />
<li onclick="showUsers()">View</li>
<li onclick="addOn()">Add</li>
<li>...</li>
</ul>
</td>
<td>
<div class="users" id="usersList"></div>
<div id="addPage" style="display:none">
Id: <input id="id" size="1"/> Name: <input id="name" /><br/>
Number: <input id="number" /><br/>
<button onclick="addUser()">Add</button>
</div>
</td>
</tr>
</table>
</div>
It is not necessary to generate the menu list dynamically unless the menu is really dynamic.
Ask if you need explanation on any of the stuff above.

Vue Survey not indexing questions

I have to build a quiz/survey app in vue.js, I'm pretty new to vue and still trying to learn it. I have a quiz/survey that asks different questions depending on what the user answers in the initial question.
so if the user picks yes it will display question 2 if the user picks no it will display question 3 etc.
I'm not sure what the best way of going around it but so far I have this.
Is there anyway i can use the value of my answer as the questionIndex after a person clicks next?
JS file:
"use strict";
let quiz = {
title: "Asbestos Quiz",
questions: [
{
text: 'Do you need help with an Asbestos Survey?',
answers: [
{
text: "Yes",
value: '2'`enter code here`
},
{
text: "No",
value: '3'
},
]
},
{
text: 'Was your property constructed pre 2000',
answers: [
{
text: "Yes",
value: '4'
},
{
text: "No",
value: '5'
},
]
},
{
text: 'Do you need an Asbestos Management plan?',
answers: [
{
text: "Yes",
value: '6'
},
{
text: "No",
value: '7'
},
]
}
]
};
var app = new Vue({
el: "#app",
data: {
quiz: quiz,
questionIndex: 0,
responses: [],
errors: [],
error: ''
},
methods: {
prev: function() {
this.questionIndex--;
},
next: function() {
if (this.responses[this.questionIndex] === undefined) {
this.errors[this.questionIndex] = 1;
this.error = 'Please select your answer';
}
else {
this.errors[this.questionIndex] = 0;
this.questionIndex++;
}
},
score: function() {
},
playAgain: function() {
this.questionIndex = 0;
}
}
});
HTML:
<html lang="en">
<head>
<title>Vue quiz/survey</title>
<meta name="viewport" content="width=device-width"/>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- <link rel="stylesheet" href="index.css"> -->
</head>
<body>
<div id="app">
<div class="container">
<div class="jumbotron mt-3">
<h1 class="mb-5">{{ quiz.title }}</h1>
<hr>
<p v-if="errors[questionIndex]" class="alert alert-danger">
{{ error }}
</p>
<div v-for="(question, index) in quiz.questions">
<div v-show="index === questionIndex">
<h4 class="mt-5 mb-3">{{ question.text }}</h4>
<div v-for="answer in question.answers" class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio"
:value="answer.value"
:name="index"
v-model="responses[index]">
{{answer.text}}
</label>
</div>
<div class="mt-5">
<button
class="btn btn-primary"
v-if="questionIndex > 0"
#click="prev">
prev
</button>
<button class="btn btn-secondary" #click="next">
next
</button>
</div>
</div>
</div>
<div v-show="questionIndex === quiz.questions.length">
<h3>Your Results</h3>
<p>
You are: {{ score() }}
</p>
<button class="btn btn-success" #click="playAgain">
Play Again!
</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

I thought that this sounded like a potentially interesting exercise, so I spent some time creating an implementation in a Vue CLI sandbox app that I built and use for trying out various ideas.
I learned a few things, and hopefully you will get something out of it. I left the 'Previous' functionality as a TODO if you decide you like it and want implement that yourself.
QuizQuestions.vue
<template>
<div class="quiz-questions">
<div class="jumbotron mt-3">
<h1 class="mb-5">{{ quiz.title }}</h1>
<hr>
<question v-if="!showResults" :question="currentQuestion" #answer-selected="processAnswer" />
<div class="mt-5">
<button class="btn btn-primary" v-if="currentQuestionId > 1 && !showResults" #click="getPreviousQuestion">
prev
</button>
<button v-if="!showResults" class="btn btn-secondary" #click="getNextQuestion">
{{ nextButtonLabel }}
</button>
</div>
<div v-if="showResults">
<h3>Your Results</h3>
<table class="table table-bordered">
<thead>
<tr>
<th>QUESTION</th>
<th>ANSWER</th>
</tr>
</thead>
<tbody>
<tr v-for="(response, index) in responses" :key="index">
<td>{{ getQuestionText(response.questionId) }}</td>
<td>{{ getAnswerText(response.answerId) }}</td>
</tr>
</tbody>
</table>
<button class="btn btn-success" #click="playAgain">
Play Again!
</button>
</div>
</div>
</div>
</template>
<script>
import quiz from './quiz.js';
import Question from '#/components/stackoverflow/Question'
export default {
components: {
Question
},
data() {
return {
quiz: quiz,
currentQuestionId: 1,
currentAnswerId: 1,
previousQuestionId: 0,
responses: [],
showResults: false,
errors: [],
error: ''
}
},
computed: {
currentQuestion() {
return this.quiz.questions.find( question => {
return question.id === this.currentQuestionId;
})
},
nextQuestionId() {
let retVal = 0;
if (this.currentAnswerId > 0) {
let tempAnswer = this.currentQuestion.answers.find( answer => {
return answer.id === this.currentAnswerId;
});
retVal = tempAnswer.nextQuestionId;
}
return retVal;
},
lastQuestion() {
return this.currentQuestion.answers[0].nextQuestionId === 0;
},
nextButtonLabel() {
return this.lastQuestion ? 'Finish' : 'Next';
}
},
methods: {
getPreviousQuestion() {
this.currentQuestionId = this.previousQuestionId;
},
getNextQuestion() {
// TODO: Look for existing response for this question in case the 'Previous' button was pressed
// If found, update answer
// Store current question id and answer id in responses
let response = { questionId: this.currentQuestionId, answerId: this.currentAnswerId };
this.responses.push(response);
if (this.lastQuestion) {
this.showResults = true;
return;
}
this.previousQuestionId = this.currentQuestionId;
this.currentQuestionId = this.nextQuestionId;
//console.log(this.responses);
},
getQuestionText(id) {
let result = this.quiz.questions.find( question => {
return question.id === id;
});
return result.text;
},
getAnswerText(id) {
// NOTE: Since answers are currently limited to '1 = Yes' and '2 = No',
// this method does not need to involve any look up
return id === 1 ? 'Yes' : 'No';
},
processAnswer(selectedAnswerId) {
this.currentAnswerId = selectedAnswerId;
},
score() {
return 'TODO'
},
playAgain() {
this.currentQuestionId = 1;
this.showResults = false;
this.responses = [];
}
}
}
</script>
Question.vue
<template>
<div class="question">
<h4 class="mt-5 mb-3">{{ question.text }}</h4>
<div class="form-check" v-for="(answer, idx) in question.answers" :key="idx">
<input class="form-check-input" type="radio"
:value="answer.id" v-model="answerId" #change="answerSelected">
<label class="form-check-label">
{{answer.text}}
</label>
</div>
</div>
</template>
<script>
export default {
props: {
question: {
type: Object,
required: true
}
},
data() {
return {
answerId: 1
}
},
watch:{
question() {
// Reset on new question
this.answerId = 1;
}
},
methods: {
answerSelected() {
this.$emit('answer-selected', this.answerId);
}
}
}
</script>
I also modified your test data by adding various ID properties to help with tracking, as well as created a few more placeholder questions.
quiz.js
const quiz = {
title: "Asbestos Quiz",
questions: [
{
id: 1,
text: 'Do you need help with an Asbestos Survey?',
answers: [
{
id: 1,
text: "Yes",
nextQuestionId: 2
},
{
id: 2,
text: "No",
nextQuestionId: 3
},
]
},
{
id: 2,
text: 'Was your property constructed pre 2000',
answers: [
{
id: 1,
text: "Yes",
nextQuestionId: 4
},
{
id: 2,
text: "No",
nextQuestionId: 5
},
]
},
{
id: 3,
text: 'Do you need an Asbestos Management plan?',
answers: [
{
id: 1,
text: "Yes",
nextQuestionId: 6
},
{
id: 2,
text: "No",
nextQuestionId: 7
},
]
},
{
id: 4,
text: 'Question 4',
answers: [
{
id: 1,
text: "Yes",
nextQuestionId: 0
},
{
id: 2,
text: "No",
nextQuestionId: 0
},
]
},
{
id: 5,
text: 'Question 5',
answers: [
{
id: 1,
text: "Yes",
nextQuestionId: 0
},
{
id: 2,
text: "No",
nextQuestionId: 0
},
]
},
{
id: 6,
text: 'Question 6',
answers: [
{
id: 1,
text: "Yes",
nextQuestionId: 0
},
{
id: 2,
text: "No",
nextQuestionId: 0
},
]
},
{
id: 7,
text: 'Question 7',
answers: [
{
id: 1,
text: "Yes",
nextQuestionId: 0
},
{
id: 2,
text: "No",
nextQuestionId: 0
},
]
}
]
};
export default quiz;

how to get jquery select drop-down multiple value?

My multiselect dropdown as below
<div class="col-sm-3 text-left form-group form-group000 form-horizontal" >
<span class="btn-block dropdown-checkbox-example dropdown-checkbox dropdown btn-gray"> </span>
</div>
Jquery code like:
<script src="js/bootstrap-dropdown-checkbox.js"></script>
function list(want, checked) {
var result = [];
for (var i = 0; i < size; i++) {
result.push({
id: i,
label: 'Item #' + i,
isChecked: checked === undefined ? !!(Math.round(Math.random() * 1)) : checked
});
}
return result;
}
var widget, alt;
var tab = [
{ id: "1", label: "Buy.", isChecked: false },
{ id: "2", label: "Sale", isChecked: false },
{ id: "3", label: "Rent", isChecked: false }
];
$('.dropdown-checkbox-example').dropdownCheckbox({
data: tab,
autosearch: true,
title: "My Dropdown Checkbox",
hideHeader: false,
showNbSelected: true,
templateButton: '<a class="dropdown-checkbox-toggle btn-block btn btn-default pad-space4" style=" text-decoration:none;" data-toggle="dropdown" href="#"><span style="color:#000">I want to</span> <span class="dropdown-checkbox-nbselected"></span><b class="caret"></b>'
});
My Issue is I want add selected value in database. so how to get dropdown selected value in Request.?

jQuery org chart how to sort the items?

I'am using this plugin: http://th3silverlining.com/2011/12/01/jquery-org-chart-a-plugin-for-visualising-data-in-a-tree-like-structure/
the question is how can I sort the <ul> items in the way I need it? are there some options or maybe some solutions out of the box?

Try this,
Demo
HTML
<div class="topbar">
<div class="topbar-inner">
<div class="container">
<a class="brand" href="#">jQuery Organisation Chart</a>
<ul class="nav">
<li>Github</li>
<li>Twitter</li>
<li>Blog</li>
</ul>
<div class="pull-right">
<div class="alert-message info" id="show-list">Show underlying list.</div>
<pre class="prettyprint lang-html" id="list-html" style="display:none"></pre>
</div>
</div>
</div>
</div>
<ul id="org" style="display:none">
<li>
Food
<ul>
<li id="beer">Beer</li>
<li>Vegetables
Click me
<ul>
<li>Pumpkin</li>
<li>
Aubergine
<p>A link and paragraph is all we need.</p>
</li>
</ul>
</li>
<li class="fruit">Fruit
<ul>
<li>Apple
<ul>
<li>Granny Smith</li>
</ul>
</li>
<li>Berries
<ul>
<li>Blueberry</li>
<li><img src="images/raspberry.jpg" alt="Raspberry"/></li>
<li>Cucumber</li>
</ul>
</li>
</ul>
</li>
<li>Bread</li>
<li class="collapsed">Chocolate
<ul>
<li>Topdeck</li>
<li>Reese's Cups</li>
</ul>
</li>
</ul>
</li>
</ul>
<div id="chart" class="orgChart"></div>
Jquery:
jQuery(document).ready(function() {
$("#org").jOrgChart({
chartElement : '#chart',
dragAndDrop : true
});
$("#show-list").click(function(e){
e.preventDefault();
$('#list-html').toggle('fast', function(){
if($(this).is(':visible')){
$('#show-list').text('Hide underlying list.');
$(".topbar").fadeTo('fast',0.9);
}else{
$('#show-list').text('Show underlying list.');
$(".topbar").fadeTo('fast',1);
}
});
});
$('#list-html').text($('#org').html());
$("#org").bind("DOMSubtreeModified", function() {
$('#list-html').text('');
$('#list-html').text($('#org').html());
prettyPrint();
});
});

////////////You can use this plugin also for json data
////////////Example
$(document).ready(function () {
var ds = [{ id: "2", parentid: "1", text: "India", children: [{ id: "5", parentid: "2", text: "MP", children: [{ id: "7", parentid: "5", text: "Indore", children: [{ id: "8", parentid: "7", text: "Tillore", children: [] }] }] }, { id: "6", parentid: "2", text: "UP", children: [] }] }, { id: "3", parentid: "1", text: "Rusia", children: [] }, { id: "4", parentid: "1", text: "China", children: [] }];
$("#mystring").CustomOrgChart({ dataSource: ds, hasTemplate: true, template: "<div style='color:red;' data-cardid='{0}'><span class='cardadd'>Add</span> <span class='cardedit'>edit</span> <span class='cardremove'>delete</span>{1}</div>",templatefields: ["id","text"] });
$("#custome").jOrgChart({
chartElement: '#string',
dragAndDrop: true
});
});
////////////Plugin
(function ($) {
jQuery.fn.CustomOrgChart = function (options) {
var defaults = {
dataSource: [],
dispalyText: "text",
children: "children",
hasTemplate: false,
template: "{0}",
templatefields: ["text"]
};
var settings = $.extend(true, {}, defaults, options);
if (settings.dataSource) {
var string = "<ul id='custome' style='display:none'>" + GetNodes(settings.dataSource) + "</ul>";
console.log(string);
(this).append(string);
return this;
}
function GetNodes(dataSource) {
var Node = "";
var dataSource = dataSource.slice(0);
var dataSourceArray = $.isArray(dataSource[0]) ? dataSource : [dataSource];
for (var i = 0; i < dataSourceArray.length; i++) {
for (var j = 0; j < dataSourceArray[i].length; j++) {
var text = dataSourceArray[i][j][settings.dispalyText];
var children = dataSourceArray[i][j][settings.children];
Node += "<li>";
var template = settings.template;
var templatefields = settings.templatefields;
if (settings.hasTemplate) {
for (var k = 0; k < templatefields.length; k++) {
template = template.replace("{" + k + "}", dataSourceArray[i][j][templatefields[k]]);
}
Node += template;
}
else {
for (var k = 0; k < templatefields.length; k++) {
template = template.replace("{" + k + "}", dataSourceArray[i][j][templatefields[k]]);
}
Node += template;
}
if (children.length > 0) {
Node += "<ul>" + GetNodes(children) + "</ul>";
}
Node += "</li>";
}
}
return Node;
}
};
})(jQuery);