Hello I hope you can help me. select
I need that when selecting "number 1" or "number 2" in the menu .
<select>
<option>numero 1</option>
<option>numero 2</option>
</select>
What happens to the cards and thus add multiple cards with content of the "option" different "number 1" or "number 2"
var card = [
];
(function newcards(card) {
this.init = function() {
this.generateList();
this.enterUser();
};
this.generateList = function() {
var parent = document.querySelector(".contenido");
var template = '';
for (var i = 0; i < card.length; i++) {
template += '<div class="col-sm-4">';
template += '<div class="card animated bounceInRight">';
template += '<div class="card-delete" data-card="' + i + '">x</div>';
template += '<div class="card-block">';
template += '<div id="ejemplo"></div>';
template += '<h3 class="card-title">' + card[i].name + '</h3>';
template += '</div>';
template += '</div>';
template += '</div>';
}
parent.innerHTML = '';
parent.insertAdjacentHTML('afterbegin', template);
deleteCard();
};
this.enterUser = function() {
function grabUser() {
var name = document.querySelector('#user_name').value;
var elements = [name];
if (validateUser(elements)) {
document.querySelector('#myForm').reset();
card.push({
name: name
});
generateList();
} else {
document.querySelector('#error').style.display = 'block';
setTimeout(function() {
document.querySelector('#error').style.display = 'none';
}, 2000);
}
}
document.querySelector('#myForm').addEventListener('submit', function(e) {
e.preventDefault();
grabUser();
});
};
this.validateUser = function(inputs) {
for (var i = 0; i < inputs.length; i++) {
if (inputs[i] == '') {
return false
}
}
return true;
};
this.deleteCard = function() {
var buttons = document.querySelectorAll(".card-delete");
function deleteThis(element) {
var obj = parseInt(element.getAttribute('data-card'));
card.splice(obj, 1);
generateList();
}
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function(e) {
deleteThis(this);
})
};
};
this.init();
})(card);
var opciones = document.getElementById('opciones');
document.getElementById('boton')
.addEventListener('click', (e) => {
$("#ejemplo").html(opciones.value);
});
.card {
width: 300px;
height: 300px;
transition: transform 0.5s;
transform-style: preserve-3d;
cursor: pointer;
position: relative;
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.card-block {
margin: 1em;
}
.card-text {
color: #00BCD4;
margin-bottom: 0px;
}
#error {
display: none;
}
.card-delete {
position: absolute;
right: 10px;
top: 6px;
line-height: 9px;
padding: 5px 5px;
font-size: 17px;
color: #F44336;
cursor: pointer;
}
<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<div class="row">
<div class="form-container">
<form id="myForm">
<div class="form-group">
<input type="text" class="form-control" id="user_name" placeholder="Escribe lo que sea">
</div>
<select id="opciones">
<option>número 1</option>
<option>número 2</option>
<option>número 3</option>
<option>número 4</option>
</select>
<input type="submit" id="boton" class="btn btn-block btn-primary" value="Agregar Carta">
<p class="text-danger" id="error">Completa Los Campos</p>
</form>
</div>
<div class="content-container">
<div class="row contenido">
</div>
</div>
</div>
I added the following lines to the grabUser function, place them before var elements = [name]
Staying as follows:
1.- If what you want is to show the text of the selected option in the card, replace
By
2.- If what you want is to iterate based on the value of the selected option, it is important to add the value attribute to the select.