Develop Reference

Button click not logging object output to console in Vue [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 27 days ago.
Improve this question
I'm pretty new to Vue. I am trying to see the output of a function in the console before emitting it to the parent component. But the function doesn't output anything to the console.
Here's my code
AddTask.vue
template>
<form #submit.prevent="onSubmit" class="add-form">
<div class="form-control">
<label>Task</label>
<input type="text" v-model="text" name="text" placeholder="Add Task" />
</div>
<div class="form-control">
<label>Day & Time</label>
<input
type="text"
v-model="day"
name="day"
placeholder="Add Day & Time"
/>
</div>
<div class="form-control form-control-check">
<label>Set Reminder</label>
<input type="checkbox" v-model="reminder" name="reminder" />
</div>
<input type="submit" value="Save Task" class="btn btn-block" />
</form>
</template>
<script>
export default{
name: 'AddTask',
data() {
return {
text: '',
day: '',
reminder: false,
}
},
method: {
onSubmit(e){
e.preventDefault()
if (!this.text) {
alert('Please add a task')
return
}
const newTask = {
id: Math.floor(Math.random() * 100000),
text: this.text,
day: this.day,
reminder: this.reminder,
}
console.log(newTask)
//this.$emit('add-task', newTask)
this.text = ''
this.day = ''
this.reminder = false
}
}
}
</script>
<style scoped>
.add-form {
margin-bottom: 40px;
}
.form-control {
margin: 20px 0;
}
.form-control label {
display: block;
}
.form-control input {
width: 100%;
height: 40px;
margin: 5px;
padding: 3px 7px;
font-size: 17px;
}
.form-control-check {
display: flex;
align-items: center;
justify-content: space-between;
}
.form-control-check label {
flex: 1;
}
.form-control-check input {
flex: 2;
height: 20px;
}
</style>
Please can someone help me figure out what is not right in this code snippet, I would really appreciate.

Just as Rob Louie spotted in the comment, the 's' was missing from the methods. So the code snippet for that segment becomes
<script>
export default{
name: 'AddTask',
data() {
return {
text: '',
day: '',
reminder: false,
}
},
methods: {
onSubmit(e){
e.preventDefault()
if (!this.text) {
alert('Please add a task')
return
}
const newTask = {
id: Math.floor(Math.random() * 100000),
text: this.text,
day: this.day,
reminder: this.reminder,
}
console.log(newTask)
//this.$emit('add-task', newTask)
this.text = ''
this.day = ''
this.reminder = false
}
}
}
</script>

Is there a good way to have it so that when someone clicks a button, say option 3 on a scale of 1-5, that it would change the color of buttons 1-3?

I am coding a survey page for a client and they want it so that if someone selects "3" out of a 5 button question scale that buttons 1-3 have a green backgroun...4 would have 1-4, etc.
Currently, if you click a button from the number scale only the one you click is highlighted green. What I want to have is so that it changes the background color of all buttons leading up to the one clicked (If you click 2 then it would change the 1 and 2 buttons to green).
Any help appreciated
Main code for the survey here (1 button example- the rest follow the same format):
<section class="l-reviews pt-30 pb-15">
<div class="contain">
<div class="row">
<div class="col-md-12">
<div class="reviews-wrapper">
<div class="reviews-top-header">
<p id="">Thank you for taking part. Please complete this survey to let us know how we’re
doing.</p>
<p>Please rate the following on a 1-5 scale (1 = Least, 5 = Most)</p>
</div>
<div class="reviews-body">
<form method='post' name='front_end' action="">
<div class="form-control">
<p>1. Were the payroll process and benefits options explained to you fully?</p>
<div class="input-holder">
<input type='hidden' name='title' value='' />
<input type='hidden' name='email' value='' />
<input type="radio" data='Unsatisfied' name='satisfaction' value='20' id='sat-1' /><label for="sat-1"></label>
<input type="radio" data='Not Very Satisfied' name='satisfaction' value='40' id='sat-2' /><label for="sat-2"></label>
<input type="radio" data='Neutral' name='satisfaction' value='60' id='sat-3' /><label for="sat-3"></label>
<input type="radio" data='Satisfied' name='satisfaction' value='80' id='sat-4' /><label for="sat-4"></label>
<input type="radio" data='Highly Satisfied' name='satisfaction' value='100' id='sat-5' /><label for="sat-5"></label>
<div class="error">
<p>Please select at least one option.</p>
</div>
</div>
</div>
<button type="button" class="send-btn">Submit</button>
<input type="hidden" name="action" value="review" />
</form>
<div class='success-form'>
<h3>Your review was submitted successfully</h3>
</div>
</div>
CSS for one button:
input[type=radio]:not(.regular-radio) {
display: none;
}
#wr-1+label,
#application-rating-1+label,
#goals-rating-1+label,
#refer-rating-1+label,
#sat-1+label {
background: url('/wp-content/themes/theme52950/images/reviews-faces/button-1.png');
height: 55px;
width: 109px;
display: inline-block;
padding: 0 0 0 0px;
background-repeat: no-repeat;
}
#wr-1:checked+label,
#application-rating-1:checked+label,
#goals-rating-1:checked+label,
#refer-rating-1:checked+label,
#sat-1:checked+label {
background: url('/wp-content/themes/theme52950/images/reviews-faces/1-hover.png');
height: 55px;
width: 109px;
display: inline-block;
padding: 0 0 0 0px;
background-repeat: no-repeat;
}
JavaScript:
<script>
$(document).ready(function() {
console.log(emailsArray);
$('input[type=radio]').click(function() {
avgOne = parseInt($('input[name=satisfaction]:checked').val());
avgTwo = parseInt($('input[name=working_rating]:checked').val());
avgThree = parseInt($('input[name=application_rating]:checked').val())
avgFour = parseInt($('input[name=goals_rating]:checked').val())
avgFive = parseInt($('input[name=refer_rating]:checked').val())
avgOfAll = ((avgOne + avgTwo + avgThree + avgFour + avgFive) / 5);
if (avgOfAll < 80) {
$('.addtl-comments').show();
} else {
$('.addtl-comments').hide();
}
})
if (checkOne && checkTwo && checkThree && checkFour && checkFive && addtlComments && checkEmailExist && emailNotDupe) {
$('.reviews-body form').submit();
const portalId = '3112753';
const formId = '23212b77-0a27-4833-93a9-766bdf8c3a9b';
const url = 'https://api.hsforms.com/submissions/v3/integration/submit/' + portalId + '/' + formId;
const body = {
context: {
pageUri: window.location.href,
pageName: $(document).find("title").text()
},
fields: [{
name: 'email',
value: getUrlParameter('email')
}, {
name: 'how_satisfied_are_you_with_the_overall_experience_in_working_with_',
value: document.querySelector('input[name="satisfaction"]:checked').getAttribute('data')
}, {
name: 'how_would_you_rate_working_with_your_recruiter_',
value: document.querySelector('input[name="working_rating"]:checked').getAttribute('data')
}, {
name: 'how_would_you_rate_the_application_process_',
value: document.querySelector('input[name="application_rating"]:checked').getAttribute('data')
}, {
name: 'how_satisfied_were_you_with_communication_throughout_your_interview_process_',
value: document.querySelector('input[name="goals_rating"]:checked').getAttribute('data')
}, {
name: 'how_likely_would_you_be_to_recommend_to_other_candidates_',
value: document.querySelector('input[name="refer_rating"]:checked').getAttribute('data')
}]
};
Any help appreciated.

A minimal reproducable example would have been sufficient. Just for fun: here's an idea for you:
document.addEventListener(`click`, handle);
function handle(evt) {
if (evt.target.dataset.scoreid) {
const score = +evt.target.dataset.scoreid;
const stars = document.querySelectorAll(`[data-scoreid]`)
.forEach((el, i) =>
el.classList[i <= score ? `add` : `remove`](`starred`));
const rateEl = evt.target.closest(`#rate`);
rateEl.classList.remove(`single`, `score`);
rateEl.classList.add(score + 1 === 1 ? `single` : `scored`);
rateEl.dataset.score = score + 1;
}
}
document.body.insertAdjacentHTML(
`beforeEnd`,
`<div id="rate" date-score="0" data-single="0">
${[...Array(5)].map((v, i) => `<span data-scoreid="${i}"></span>`)
.join(``)}
</div>`);
#rate {
font-size: 2rem;
}
#rate.scored:after {
content: 'you scored 'attr(data-score)' stars' ;
color: green;
}
#rate.single:after {
content: 'you scored 'attr(data-score)' star' ;
color: green;
}
#rate span {
cursor: pointer;
}
#rate span:before {
content: '\2606'
}
#rate span.starred:before {
content: '\2605';
color: green;
}

event listener is firing multiple times

its a quiz app where clicking on replay button is supposed to restart the quiz and the given event listener code is used when the user selects an answer for question. it works completely fine during first time but when the quiz restarts, the event listener fires twice and if again replay is clicked , then the event listener for selecting correct option fires thrice
let chosen = document.getElementsByClassName("option");
console.log('options',chosen);
for (let choosed of chosen) {
choosed.addEventListener("click", (e) => {
clearInterval(myVar);
clearInterval(counterLine);
console.log("you have choosen");
next.classList.add("next-show");
next.classList.remove("next-hide");
if (questionCount == 10) {
finish.classList.add("next-show");
finish.classList.remove("next-hide");
}
let choosenOption = e.target.className;
choosenOption = choosenOption.substr(7, 14);
let correctOption = arrayOFCorrectAnswers[questionCount - 1];
if (correctOption.includes(choosenOption)) {
colorGreen(e.target);
score++;
} else {
colorRed(e.target);
}
});
}
<div class="question-answer">
<div class="question">
<h2 id="question">Question Incoming.....</h2>
</div>
<div class="options-answers">
<div class="option" id="option1">option1 </div>
<div class="option" id="option2">option2</div>
<div class="option" id="option3">option3</div>
<div class="option" id="option4">option4</div>
</div>
</div>
this is the html

I tried to follow the OP example and couldn't understand it very well. I did notice that it is a quiz without any form controls (not even a <button>). If you are interacting with the user and require input from said user it would behoove you to use <form>, <input>, <button>, etc.
The demo below has:
init() which wraps around all of the variables and functions acting as a closure. It passes 3 arrays.
init() is ran only once. It will register the 'submit' event to the <form> and register the 'click' event to a <button>. It also runs spawnQA() which changes the text of the question and the 4 options.
The options are <input type='radio'> and <label>
const questions = ['Question 1', 'Question 2', 'Question 3', 'Question 4'];
const options = [
['1.1', '1.2', '1.3', '1.4'],
['2.1', '2.2', '2.3', '2.4'],
['3.1', '3.2', '3.3', '3.4'],
['4.1', '4.2', '4.3', '4.4']
];
const answers = [1, 0, 3, 2];
const init = (questions, options, answers) => {
const form = document.forms.QA;
const io = form.elements;
const Q = document.getElementById('question');
const inst = document.querySelector('section');
const list = document.querySelector('ol');
const display = document.querySelector('.display');
let count = parseInt(io.counter.value);
let score = parseInt(io.correct.value);
const endQuiz = () => {
Q.textContent = "Quiz Completed";
inst.classList.toggle('hide');
list.classList.toggle('hide');
io.btn.classList.toggle('hide');
io.rst.classList.toggle('hide');
display.textContent = `Score: ${score}`;
return false;
};
const resetQuiz = event => {
inst.classList.toggle('hide');
list.classList.toggle('hide');
io.btn.classList.toggle('hide');
io.rst.classList.toggle('hide');
count = 0;
score = 0;
spawnQA(questions, options, answers, count);
form.reset();
};
const spawnQA = (questions, options, answers, count) => {
if (count >= answers.length) {
endQuiz();
return false;
}
const opts = [...document.querySelectorAll('.option')];
Q.textContent = `${count+1}. ${questions[count]}`;
opts.forEach((label, index) => {
label.textContent = options[count][index];
});
return false;
};
const nextQuestion = event => {
event.preventDefault();
const opts = [...io.options];
for (let [idx, opt] of opts.entries()) {
if (opt.checked) {
score = answers[count] === idx ? ++score : score;
}
}
count++;
io.counter.value = count;
io.correct.value = score;
spawnQA(questions, options, answers, count);
console.log('score: ' + score);
console.log('count: ' + count);
};
form.onsubmit = nextQuestion;
io.rst.onclick = resetQuiz;
spawnQA(questions, options, answers, count);
};
init(questions, options, answers);
.hide {
display: none
}
ol {
list-style-type: lower-alpha;
}
button {
cursor: pointer;
}
input,
label {
display: inline-block;
vertical-align: text-top;
}
/* SO Console Display - Right Side Column */
.as-console-wrapper {
width: 50% !important;
min-height: 100%;
margin-left: 50%;
font-variant: normal;
}
.as-console-row.as-console-row::after {
content: '';
padding: 0;
margin: 0;
border: 0;
width: 0;
}
<form id="QA">
<input id='correct' type='hidden' value='0'>
<input id='counter' type='hidden' value='0'>
<fieldset>
<legend id="question">Question Incoming.....</legend>
<ol>
<li>
<input id='option1' name='options' type='radio'>
<label for='option1' class='option'>Option 1</label>
</li>
<li>
<input id='option2' name='options' type='radio'>
<label for='option2' class='option'>Option 2</label>
</li>
<li>
<input id='option3' name='options' type='radio'>
<label for='option3' class='option'>Option 3</label>
</li>
<li>
<input id='option4' name='options' type='radio'>
<label for='option4' class='option'>Option 4</label>
</li>
</ol>
<section class='hide'>
<p class='display'></p>
<p>Click "Reset" to reset quiz.</p>
</section>
</fieldset>
<button id='btn'>Next</button>
<button id='rst' class='hide' type='button'>Reset</button>
</form>

HTML javascript form - what other ways can I code this javascript function with form validation

I have written the below code to get the form data to be displayed on the page. What other methods can I use to re-write the below code to include form validation.
I'm a beginner to javascript and just needed some guidance or a code snippet to help.
JSFiddle link: https://jsfiddle.net/jphfzgdq/
<head>
<script type="text/javascript">
function collect(frm) {
document.getElementById("results").innerHTML+="Name: "+frm.nm.value+"<br>Age: "+frm.ag.value+"<hr>"
frm.reset();
}
</script>
<style>
/* #entries,#results{float:left} */
</style>
</head>
<body>
<div id="entries">
<form name ="myform">
Enter name: <input type="text" name="nm"/><br>
Enter age: <input type="text" name="ag"/><br>
<input type="button" value="display" onclick="collect(this.form)"/>
</form>
</div>
<div id="results"></div>
</body>

I think this is what you are asking for
<head>
<script type="text/javascript">
var totalAge = 0;
function collect(frm) {
var name = frm.nm.value;
var age = parseInt(frm.ag.value);
totalAge += age;
try {
if (name == "" || name == null) {
alert('Enter your name');
}
else if (age == "" || age == null || age == NaN) {
alert('Enter a valid age');
}
else {
document.getElementById("results").innerHTML+="Name: "+ name +"<br>Age: "+ age + "<br>total age: "+ totalAge +"<hr>"
frm.reset();
}
}
catch (e) {
console.log(e);
}
}
</script>
<style>
/* #entries,#results{float:left} */
</style>
</head>
<body>
<div id="entries">
<form name ="myform">
Enter name: <input type="text" name="nm"/><br>
Enter age: <input type="number" name="ag"/><br>
<input type="button" value="display" onclick="collect(this.form)"/>
</form>
</div>
<div id="results"></div>
</body>

I just made a simple age validation.
function collect(frm) {
if (Number(frm.ag.value) >= 18) {
document.getElementById("results").innerHTML +=
"Name: " + frm.nm.value + "<br>Age: " + frm.ag.value + "<hr>";
document.getElementById("warn").textContent = "";
frm.reset();
} else {
document.getElementById("warn").textContent =
"18+ Are only allowed!";
}
}
#warn {
color: red;
}
<div id="entries">
<form name="myform">
Enter name: <input type="text" name="nm" /><br> Enter age: <input type="number" name="ag" /><br>
<input type="button" value="display" onclick="collect(this.form)" />
</form>
</div>
<h4 id="warn"></h4>
<div id="results"></div>
EDIT:
You were not doing it in a proper way so tried to make it better.
const nameInput = document.getElementById("nameInput");
const ageInput = document.getElementById("ageInput");
const btnInput = document.getElementById("btnInput");
const results = document.getElementById("results");
const warn = document.getElementById("warn");
const ageCounter = document.getElementById("totalAgeCounter");
let ageCount = 0;
function collectData() {
if (nameInput.value !== "" && Number(ageInput.value) >= 18) {
results.innerHTML += `Name: ${nameInput.value} <br>Age: ${ageInput.value} <hr>`;
ageCount += Number(ageInput.value);
ageCounter.textContent = ageCount;
warn.textContent = "";
nameInput.value = "";
ageInput.value = "";
} else {
warn.textContent = "18+ Are only allowed!";
}
}
btnInput.addEventListener("click", collectData);
#warn {
color: red;
}
#totalAgeCounter {
width: 50px;
height: 50px;
display: grid;
place-items: center;
background-color: blue;
position: absolute;
top: 20px;
right: 20px;
color: #fff;
border-radius: 50%;
font-weight: bolder;
font-size: 18px;
}
<div id="entries">
<form name="myform">
Enter name:
<input type="text" id="nameInput" />
<br /> Enter age:
<input type="number" id="ageInput" />
<br />
<input type="button" value="display" id="btnInput" />
</form>
</div>
<h4 id="warn"></h4>
<div id="results"></div>
<div id="totalAgeCounter"></div>

Registering and showing data in select

When I try the "hentmekanikersel" function which is trying to bring firstname and surname into a select element which is in my html, I don't think it knows what database I need the data from so how do I make it work?
What the whole code is about is registering a kunde and a mekaniker and then registering a time for them to meet.
A kunde is a customer in Norwegian and mekaniker is a mechanic.
var inpmekfornavn = document.getElementById("inpmekfornavn");
var inpmeketternavn = document.getElementById("inpmeketternavn");
var inpkfornavn = document.getElementById("inpkfornavn");
var inpketternavn = document.getElementById("inpketternavn");
var inpadresse = document.getElementById("inpadresse");
var inpmobil = document.getElementById("inpmobil");
var inppoststed = document.getElementById("inppoststed");
var inppostnr = document.getElementById("inppostnr");
var inpepost = document.getElementById("inpepost");
var inpmekaniker = document.getElementById("inpmekaniker");
var inpkunde = document.getElementById("inpkunde");
var inpdato = document.getElementById("inpdato");
var inptidspunkt = document.getElementById("inptidspunkt");
var database = firebase.database();
var mekaniker = database.ref("mekaniker");
var kunde = database.ref("kunde");
//trying to get data from database"mekaniker" into a select
function hentmekanikersel(snapshot){
var mekselkey = snapshot.key;
var mekselinfo = snapshot.val();
var mekselref = database.ref("mekaniker")
inpmekaniker.innerHTML += `
<option value="${mekselkey}">${mekselinfo}</option>
`
}
function hentkunde(snapshot){
}
function registrermekaniker(event) {
event.preventDefault();
//henter ut verdiene til mekaniker
var fornavn = inpmekfornavn.value;
var etternavn = inpmeketternavn.value;
//nullstiller verdiene til inputfeltene
inpmekfornavn = "";
inpmeketternavn = "";
//registrer mekaniker I databasen
mekaniker.push({
"fornavn" : fornavn,
"etternavn" : etternavn
});
}
skjema.onsubmit = registrermekaniker;
function registrerkunde(event) {
event.preventDefault();
var Fornavn = inpkfornavn.value;
var Etternavn = inpketternavn.value;
var Adresse = inpadresse.value;
var Poststed = inppoststed.value;
var Postnr = inppostnr.value;
var Mobil = inpmobil.value;
var Epost = inpepost.value;
inpkfornavn = "";
inpketternavn = "";
inpadresse = "";
inppoststed = "";
inppostnr = "";
inpmobil = "";
inpepost = "";
kunde.push({
"Fornavn" : Fornavn,
"Etternavn" : Etternavn,
"Adresse" : Adresse,
"Poststed" : Poststed,
"Postnr" : Postnr,
"Mobil" : Mobil,
"Epost" : Epost
})
}
skjema2.onsubmit = registrerkunde;
html, body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: xx-small;
}
.label {
display: block;
width: 20%;
margin-top: 1em;
background-color: blue;
color: white;
font-size: 17px;
}
input[type=text] {
display: block;
width: 98.5%;
height:;
font-size: inherit;
}
select {
display: block;
width: 100%;
height: 2.5em;
font-size: 10px;
}
button {
display: block;
font-size: inherit;
}
table {
font-size: 14px;
width: 100%;
}
th {
font-size: 17px;
color: white;
text-align: left;
background: blue;
}
div {
display: grid;
grid-template-columns: auto auto;
}
<script src="https://www.gstatic.com/firebasejs/5.0.2/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyBpDL_l4TEIidZ2gSLb6uLXY44IObWnBEM",
authDomain: "khra-89294.firebaseapp.com",
databaseURL: "https://khra-89294.firebaseio.com",
projectId: "khra-89294",
storageBucket: "khra-89294.appspot.com",
messagingSenderId: "1063667109904"
};
firebase.initializeApp(config);
</script>
<center>
<h1>Kulbil</h1>
</center>
<center>
<div>
<!-- A form for Arrangement-->
<h3>register Mekaniker:</h3>
<h3>Register Kunde:</h3>
<form id="skjema">
<label class="label">Fornavn: <input id="inpmekfornavn" type="text"></label>
<label class="label">Etternavn:<input id="inpmeketternavn"type="text"></label>
<button type="submit">Send inn</button>
</form>
<form id="skjema2">
<label class="label">Fornavn: <input id="inpkfornavn" type="text"></label>
<label class="label">Etternavn: <input id="inpketternavn" type="text"></label>
<label class="label">Adresse: <input id="inpadresse" type="text"></label>
<label class="label">Mobilnr: <input id="inpmobil" type="text"></label>
<label class="label">Poststed: <input id="inppoststed"type="text"></label>
<label class="label">Postnr: <input id="inppostnr"type="text"></label>
<label class="label">E-post: <input id="inpepost"type="text"></label>
<button type="submit">Send inn</button>
</form>
<form id="skjema3">
<label class="label">Velg Mekaniker<select id="inpmekaniker"></select></label>
<label class="label">Velg Kunde<select id="inpkunde"></select></label>
<label class="label"><input id="inpdato" type="text" placeholder="01.01.2000"></label>
<label class="label"><input id="inptidspunkt" type="text" placeholder="13.45"></label>
</form>
</div>
</center>
<br>
<br>
<br>
<table>
<tr><th>Fornavn</th><th>Etternavn:</th><th>Adresse:</th><th>Mobilnummer:</th><th>Poststed:</th></tr>
<tbody id="txttabell"></tbody>
</table>
<hr>
<br>
<br>
<br>
<table>
<tr><th>Kundens fornavn:</th><th>kundens etternavn:</th><th>Mekaniker fornavn:</th><th>Mekaniker etternavn:</th><th>Dato:</th><th>Tidspunkt:</th></tr>
<tbody id="txttabell2"></tbody>
</table>
<hr>
<br>
<br>
<br>