Develop Reference

How can I change paragraph content on button click with if statement?

Trying to display different messages inside the p element for when someone clicks on one of the three buttons. But it only displays the first message (reply) for all the buttons.
Can't see what I have done wrong...
HTML
<div class="options">
<div id="good" class="btn"></div>
<div id="idk" class="btn"></div>
<div id="bad" class="btn"></div>
</div>
JavaScript
let good = document.getElementById("good");
let idk = document.getElementById("idk");
let bad = document.getElementById("bad");
let main = document.querySelector(".main");
let reply;
document.getElementById("good"), document.getElementById("idk"), document.getElementById("bad")].forEach(option => {
option.addEventListener("click", () => {
if (good.clicked = true) {
main.style.display = "block";
reply = "Hey";
} else if (idk.clicked = true) {
main.style.display = "block";
reply = "Well yeah";
} else if (bad.clicked = true) {
main.style.display = "block";
reply = "123";
}
document.getElementById("reply").innerHTML = reply;
});
});

const good = document.getElementById("good");
const idk = document.getElementById("idk");
const bad = document.getElementById("bad");
const main = document.querySelector(".main");
const reply = document.getElementById("reply");
const messageTypes = {
good: 'Hey',
idk: 'Well yeah',
bad: '123 BAD'
};
[good, idk, bad].forEach(option => {
option.addEventListener("click", (e) => {
reply.innerHTML = messageTypes[e.target.id];
});
});
<div class="options">
<button id="good" class="btn">good</button>
<button id="idk" class="btn">idk</button>
<button id="bad" class="btn">bad</button>
</div>
<div class="main"><div>
<div id="reply"></div>
Use const for everything, create a separate message dictionary for every message and just map it against the id. You don't need to use jQuery.

If your real use case is as simple as your example, I would consider maybe using different event listeners with different logic inside them. But if you want to use the same event listener, then you can use event.target.id to know which button was clicked:
[document.getElementById("good"), document.getElementById("idk"), document.getElementById("bad")].forEach(option => {
option.addEventListener("click", (event) => {
switch (event.target.id) {
case "good":
reply = "Hey";
break;
case "idk":
reply = "Well yeah";
break;
case "bad":
reply = "123";
break;
}
main.style.display = "block";
document.getElementById("reply").innerHTML = reply;
});
});
Here you can see it working (note that I removed main.style.display = "block"; in the following example since I don't know what main is in your original code):
[document.getElementById("good"), document.getElementById("idk"), document.getElementById("bad")].forEach(option => {
option.addEventListener("click", (event) => {
switch (event.target.id) {
case "good":
reply = "Hey";
break;
case "idk":
reply = "Well yeah";
break;
case "bad":
reply = "123";
break;
}
document.getElementById("reply").innerHTML = reply;
});
});
<div class="options">
<div id="good" class="btn">good</div>
<div id="idk" class="btn">idk</div>
<div id="bad" class="btn">bad</div>
</div>
<div id="reply"/>

It could be something like that:
let good = document.getElementById("good");
let idk = document.getElementById("idk");
let bad = document.getElementById("bad");
let main = document.querySelector(".main");
let reply;
[good, idk, bad].forEach(option => {
option.addEventListener("click", (e) => {
if (e.target == good) {
main.style.display = "block";
reply = "Hey";
} else if (e.target == idk) {
main.style.display = "block";
reply = "Well yeah";
} else if (e.target == bad) {
main.style.display = "block";
reply = "123";
}
document.getElementById("reply").innerHTML = reply;
});
});
<div class="options">
<div id="good" class="btn">good</div>
<div id="idk" class="btn">idk</div>
<div id="bad" class="btn">bad</div>
</div>
<div class="main"><div>
<div id="reply"></div>

I'd be tempted to use explicit event handlers for each of the buttons rather than a generic handler that then tests all three conditions.
You can reduce the code duplication by using a function to handle the display update of the main element and the setting of reply.
Something like the following shows this in action:
let good = document.getElementById("good");
let idk = document.getElementById("idk");
let bad = document.getElementById("bad");
let main = document.querySelector(".main");
good.addEventListener("click", function(e) {
showMain("Good");
});
idk.addEventListener("click", function(e) {
showMain("Well yeah");
});
bad.addEventListener("click", function(e) {
showMain("123");
});
function showMain(replyText) {
main.style.display = "block";
document.getElementById("reply").innerHTML = replyText;
}
.main {
background-color: red;
display: none;
height: 100px;
width: 100px;
}
<button id="good">Good</button>
<button id="idk">Idk</button>
<button id="bad">Bad</button>
<div class="main"></div>
<div id="reply"></div>

You can instead, do something like this for what you want
In Pure VanillaJS
[document.getElementById("good"), document.getElementById("idk"), document.getElementById("bad")].forEach(option => {
option.addEventListener("click", (event) => {
if (event.target.id == "good") {
main.style.display = "block";
reply = "Hey";
} else if (event.target.id == "idk") {
main.style.display = "block";
reply = "Well yeah";
} else if (event.target.id == "bad") {
main.style.display = "block";
reply = "123";
}
document.getElementById("reply").innerHTML = reply;
});
});

= is used for assignments however == is used to check equality of two strings in javascript
[] ...addEventListener("click", (e) => {
if (good.id == e.target.id) {
main.style.display = "block";
reply = "Hey";
}
// and so on
document.getElementById("reply").innerHTML = reply;
});
var btn1=document.getElementById('btn1')
var btn2=document.getElementById('btn2')
var btn3=document.getElementById('btn3')
// jquery way
$('.btn').on("click",function(e){
$("#msg").html(e.target.id+" clicked");
})
// javascript way
var classname = document.getElementsByClassName("btn");
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener("click", function(e){
document.getElementById('msg').innerHTML =e.target.id+' clicked';
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<input type="button" id="btn1" class="btn" value="button 1">
<input type="button" id="btn2" class="btn" value="button 2">
<input type="button" id="btn3" class="btn" value="button 3">
<p id="msg"></p>

How to create a link from button values for woocommerce order

I have to generate a add to cart link for a page from value inputed by our customer. For example, the customer wants to order 3 products from our site www.example.com, so the code generates a link to add these 3 product to cart on page www.example2.com/?add-to-cart=25&quantity=3″.
Any ideas? I would be very grateful.
Here is the qet quantity code which works like a charm.
<button class="plus" onclick="buttonClickUP();">+</button>
<input type="text" id="gumb2" value="1"></input>
<button class="plus" onclick="buttonClickDOWN();">-</button>
<input type="text" id="order" value="ORDER NOW"></input>
<script>
function spremembax() {
document.getElementById("gumb2").value = "2";
}
function spremembay() {
document.getElementById("gumb2").value = "3";
}
var i = 0;
function buttonClickUP() {
var el = document.getElementById('gumb2');
el.value = Number(el.value) + 1;
}
var i = 0;
function buttonClickDOWN() {
var el = document.getElementById('gumb2');
if(el.value == 1) return false;
el.value = Number(el.value) - 1;
}
</script>

Here is a code sample which I wrote for you which does the job:
JSBIN Snippet Link: https://jsbin.com/guborazuqu
function spremembax() {
document.getElementById("gumb2").value = "2";
}
function spremembay() {
document.getElementById("gumb2").value = "3";
}
var i = 0;
function buttonClickUP() {
var el = document.getElementById('gumb2');
el.value = Number(el.value) + 1;
}
var i = 0;
function buttonClickDOWN() {
var el = document.getElementById('gumb2');
if (el.value == 1) return false;
el.value = Number(el.value) - 1;
}
function generateAddToCartLink() {
var productID = document.getElementById('productID').value;
var quantity = document.getElementById('gumb2').value;
var generatedLink = `${location.protocol}//${location.hostname}/?add-to-cart=${productID}&quantity=${quantity}`;
window.location.href = generatedLink;
}
<button class="plus" onclick="buttonClickUP();">+</button>
<input id="productID" type="text" value="25">
<input id="gumb2" type="text" value="1">
<button class="plus" onclick="buttonClickDOWN();">-</button>
<button id="order" onclick="generateAddToCartLink()">ORDER NOW</button>

javascript not redirecting to a different html page

I'm making a login for a mock site, there are 2 types of users, and each type must be redirected to its own profile page after being logged in.
However, it's only working for one type (Instructor), the other one isn't being redirected and the console isn't giving me any errors
heres the html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Proyecto Final</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style2.css" />
<link rel="stylesheet" href="css/style3.css" />
</head>
<body>
<header>
<div class="conteiner cf">
<img src="images/logo2.png" alt="Logo" class="logo">
<nav>
Usuario
<!-- About -->
Instructor
</nav>
</div>
</header>
<div class="conteiner2 cf">
<aside class="Texto cf">
<h1 class="h1texto">Usuario</h1>
<form class="login-form">
<input type="text" placeholder="Username" id="txtUsername"/>
<input type="password" placeholder="Password"id="txtPassword"/>
<input type="button" value="Ingresar" id="btnIngresarLogin">
<p class="message">Estas registrado? Crear una nueva cuenta</p>
</form>
</aside>
</div>
<footer class="footerfinal cf">
<div class="conteinerfooter cf">
<p class="ParrafoFooter cf">2014 copyright</p>
<nav class="NavFooter">
Index
About
Contact
</nav>
</div>
</footer>
<script src="js/logicaNegociosUsuarios.js"></script>
<script src="js/logicaInterfazInicioSesion.js"></script>
</body>
</html>
and the JS
document.querySelector('#btnIngresarLogin').addEventListener('click', IniciarSesion);
function IniciarSesion(){
var sUsername ='';
var sPassword ='';
var bAccesoInstructor = false;
var bAccesoCliente = false;
sUsername = document.querySelector('#txtUsername').value;
sPassword = document.querySelector('#txtPassword').value;
bAccesoInstructor = validarCredenciales(sUsername, sPassword);
bAccesoCliente = validarCredenciales(sUsername, sPassword)
if (bAccesoInstructor === true){
window.location.href = 'perfilInstructor.html';
} else {
if(bAccesoCliente === true) {
window.location.href = 'perfilCliente.html';
}
}
}
function validarCredenciales(psUsername, psPassword){
var listaUsuarios = obtenerListaUsuarios();
var bAccesoInstructor = false;
var bAccesoCliente = false;
var usuario = obtenerListaUsuarios().map(function (usuario) {
if(usuario[10] === psUsername){
if(usuario[11] === psPassword){
if(usuario[13] === 'Instructor')
bAccesoInstructor = true;
localStorage.setItem('rolUsuarioActivoLS', JSON.stringify(usuario));
}
}
else{ if(usuario[10] === psUsername){
if(usuario[11] === psPassword){
if(usuario[13] === 'Cliente')
bAccesoCliente = true;
localStorage.setItem('rolUsuarioActivoLS', JSON.stringify(usuario))
}
}
}
});
if(!bAccesoInstructor && !bAccesoCliente){
alert('Credenciales incorrectos');
}
return bAccesoInstructor;
return bAccesoCliente;
}
I even tried turning all the "bAccesoCliente" to true to see if it would go there by default but it's still not working

Thanks for the solutions provided. However, in the end these didn't work. My cousin helped me find a simpler solution, posting it here in case anyone needs it
document.querySelector('#btnIngresarLogin').addEventListener('click', IniciarSesion);
function IniciarSesion(){
var sUsername ='';
var sPassword ='';
var sPrivilegios = JSON.parse(localStorage.getItem('rolUsuarioActivoLS'))
sUsername = document.querySelector('#txtUsername').value;
sPassword = document.querySelector('#txtPassword').value;
validarCredenciales(sUsername, sPassword);
}
function validarCredenciales(psUsername, psPassword){
var listaUsuarios = obtenerListaUsuarios();
var bAcceso = false;
var usuario = obtenerListaUsuarios().map(function (usuario) {
if(usuario[10] === psUsername){
if(usuario[11] === psPassword){
bAcceso = true;
//Almaceno el usuario activo en LS
localStorage.setItem('rolUsuarioActivoLS', JSON.stringify(usuario));
if (bAcceso === true){ //Si el acceso es correcto
if(usuario[13] === 'Cliente'){//Si el usuario es tipo cliente
window.location.href = 'perfilCliente.html';
}else { //Si no es cliente, es intructor
window.location.href = 'perfilInstructor.html'
}
}
}
}
});
if(!bAcceso){
alert('Credenciales incorrectos');
}
return bAcceso;
}

First, these two are wrong:
return bAccesoInstructor;
return bAccesoCliente;
A single function cannot return twice, it will never reach the 2nd return statement.
For redirection try:
function validarCredenciales(psUsername, psPassword){
var listaUsuarios = obtenerListaUsuarios();
var pageToRedirect = false;
var usuario = obtenerListaUsuarios().map(function (usuario) {
if(usuario[10] === psUsername && usuario[11] === psPassword){
if(usuario[13] === 'Instructor') {
pageToRedirect = 'bAccesoInstructor';
localStorage.setItem('rolUsuarioActivoLS', JSON.stringify(usuario));
} else if(usuario[13] === 'Cliente') {
pageToRedirect = 'bAccesoCliente';
localStorage.setItem('rolUsuarioActivoLS', JSON.stringify(usuario))
}
}
});
if(!pageToRedirect){
alert('Credenciales incorrectos');
}
return pageToRedirect;
}
Then:
function IniciarSesion(){
var sUsername ='';
var sPassword ='';
sUsername = document.querySelector('#txtUsername').value;
sPassword = document.querySelector('#txtPassword').value;
var validatedCredentials = validarCredenciales(sUsername, sPassword);
if (validatedCredentials ==='bAccesoInstructor'){
window.location.href = 'perfilInstructor.html';
} else if(validatedCredentials ==='bAccesoCliente') {
window.location.href = 'perfilCliente.html';
}
}

Angularjs devade tags when user put comma

I have a case in which I need to divide tags when the user put a comma separation, for the moment the user can only add tags one by one, what I want to do is allows user to enter more than one tag in the input separated by a comma:
This is what I have now :
this is what I want to do :
what I have so far :
<div class="form-group">
<label>Mes centres d'intérêt</label>
<div class="input-group" style="margin-bottom: 8px;">
<input id="tagInsert" type="text" name="newTag" ng-model="newTag" ng-model-options="{debounce: 100}" typeahead="tag for tag in getTags($viewValue)" class="form-control" typeahead-loading="loadingTags" ng-keydown="addInterestOnEvent($event)" ng-disabled="interestLimit" autocomplete="off">
<span class="input-group-btn"><span class="btn btn-primary" ng-click="addInterest()" analytics-on="click" ng-disabled="interestLimit" analytics-event="Ajout Interet" analytics-category="Profil">Ajouter</span></span>
</div>
<p class="form__field__error" ng-show="interestLimit">Vous avez atteint la limite de 10 centres d'intérêt.</p>
<ul class="tags">
<li class="tag" ng-repeat="name in user.interests track by $index">{{ name }} <i class="icon-close" ng-click="removeInterest($index)" analytics-on analytics-event="Supprimer Interet" analytics-category="Profil"></i></li>
</ul>
</div>
My controller :
$scope.getTags = function (name) {
return $http.get('/api/tags/' + name.replace('/', '')).then(function (result) {
var tags = result.data;
for (var i = tags.length; i--; ) {
var tagName = tags[i].name;
if ($scope.user.interests.indexOf(tagName) !== -1) tags.splice(i, 1);
else tags[i] = tagName;
}
return tags;
});
};
$scope.removeInterest = function (id) {
$scope.interestLimit = false;
$scope.user.interests.splice(id, 1);
}
$scope.addInterest = function () {
if ($scope.interestLimit) return;
var element = $document[0].getElementById('tagInsert'),
value = element.value;
if (value.length) {
element.value = '';
if ($scope.user.interests.indexOf(value) === -1) {
$scope.user.interests.push(value);
$scope.interestLimit = $scope.user.interests.length === 10;
}
}
};
$scope.addInterestOnEvent = function (event) {
if (event.which !== 13) return;
event.preventDefault();
$scope.addInterest();
};
$scope.remove = function () {
$scope.confirmModal = Modal.confirm.delete(function () {
User.remove(function () {
submit = true;
Auth.logout();
$location.path('/');
});
})('votre compte');
};

You should split value with comma and do for loop.
Change "addInterest" function like this:
$scope.addInterest = function () {
if ($scope.interestLimit) return;
var element = $document[0].getElementById('tagInsert'),
value = element.value.split(',');
if (value.length) {
element.value = '';
for (var i = 0; i < value.length; i++) {
if ($scope.interestLimit) break;
if ($scope.user.interests.indexOf(value[i]) === -1) {
$scope.user.interests.push(value[i]);
$scope.interestLimit = $scope.user.interests.length === 10;
}
}
}
};

As far as I understand , you want to split text into string array by comma
Try this code please
<input id='tags' type="text" />
<input type="button" value="Click" onclick="seperateText()" />
<script>
function seperateText(){
var text= document.getElementById("tags").value;
var tags = text.split(',');
console.log(text);
console.log(tags);
}
</script>

What is going wrong here?

i made this little script to learn javascript. but i keep getting unexpected token switch..
but hoe do is set switch the corect way??
html:
<p id="new">test<p>
<input id="button" type="submit" name="button" value="enter" />
js:
var switch = true;
if (switch == false){
document.getElementById('button').onclick = function() {
document.getElementById("new").innerHTML = "Mijn Naam!";
var switch = true;
};
} else {
document.getElementById('button').onclick = function() {
document.getElementById("new").innerHTML = "shiva";
var switch = false;
};
}

how about:
<p id="new">test<p>
<input id="button" type="submit" name="button" value="enter" />
var clicked = false;
document.getElementById('button').onclick = function() {
document.getElementById("new").innerHTML = clicked ? "shiva" : "Mijn Naam!";
clicked = !clicked;
};

switch is a reserved word. You should use some variable name else.
By the way, your code is possible to be compressed as follows:
var switchOn = true;
document.getElementById('button').onclick = function() {
document.getElementById("new").innerHTML =
switchOn ? "shiva" :"Mijn Naam!";
switchOn = !switchOn;
}