We Keep Coding

I need to write values from radio button to console (JS const)

let opinions = [];
if (localStorage.myTreesComments) {
opinions = JSON.parse(localStorage.myTreesComments);
}
console.log(opinions);
const myFrmElm = document.getElementById("opnFrm");
myFrmElm.addEventListener("submit", processOpnFrmData);
function processOpnFrmData(event) {
const nopName = document.getElementById("menoapriezvisko").value.trim();
const nopEmail = document.getElementById("email").value.trim();
const nopUrl = document.getElementById("url").value.trim();
const nopComm = document.getElementById("komentar").value.trim();
const nopStar1 = document.getElementById("star-rating").value.trim();
const nopStar2 = document.getElementById("star-rating2").value.trim();
const nopScale = document.getElementById("scale-rating").value.trim();
const nopWillReturn = document.getElementById("willReturnElm").checked;
if (nopName == "" || nopEmail == "" || nopUrl == "" || nopComm == "") {
window.alert("Prosím, zadajte všetky údaje.");
return;
}
const newOpinion = {
name: nopName,
email: nopEmail,
url: nopUrl,
comment: nopComm,
gdpr: nopWillReturn,
created: new Date()
};
console.log("Nový názor návštevníka:\n " + JSON.stringify(newOpinion));
opinions.push(newOpinion);
localStorage.myTreesComments = JSON.stringify(opinions);
//4. Notify the user
window.alert("Tvoj názor bol uložený! Pre viac info nahliadni do konzole.");
console.log("Nový názor bol pridaný!");
console.log(opinions);
//5. Reset the form
myFrmElm.reset();
}
<form id="opnFrm">
<label for="menoapriezvisko">Meno a priezvisko</label>
<input type="text" id="menoapriezvisko" name="menoapriezvisko">
<label for="email">Kontaktný email</label> <input type="email" id="email">
<label>1. Celková spokojnosť s dizajnom a funkcionalitou stránky ?</label><br>
<span class="star-rating">
<input type="radio" name="rating1" value="1"><i></i>
........................
<input type="radio" name="rating1" value="5"><i></i>
</span>
<div class="clear"></div>
<hr class="survey-hr">
<label>2. Celková spokojnosť s obsahom.</label><br>
<span class="star-rating2">
<input type="radio" name="rating2" value="1"><i></i>
..........................
<input type="radio" name="rating2" value="5"><i></i>
</span>
<div class="clear"></div>
<hr class="survey-hr">
<label style="color: red;"><b>3. Celkové hodnotenie stránky (1-10)</b></label>
<span class="scale-rating">
<label value="1">
<input type="radio" name="rating" >
<label style="width:100%;"></label>
</label>
<label value="2">
<input type="radio" name="rating" >
<label style="width:100%;"></label>
</label>
..................
<label value="10">
<input type="radio" name="rating" value="10">
<label style="width:100%;"></label>
</label>
</span>
<div class="clear"></div>
<input style="background:#43a7d5;color:#fff;padding:12px;border:0" type="submit" value="Odoslať">
<button type="submit">Odošli</button>
<input style="background:#43a2d1;color:#fff;padding:12px;border:0" type="reset" value="Resetuj">
</form>
</div>
</article>
I need to write values from 3 spans of radio buttons to my JS script into const Opinions.
In first 2 spans I have star rating from 1-5 and in the third span I have points (1-10).. I need to read these values and write them into my script. Please if u can help me i would be really pleased. It is hard for me.
I am using jQuery and Javascript.
Thanks for any help.

How do I check two options at once in the option quiz?

I did it as you wanted and it still doesn't work as it should, if I don't check anything in the checkbox and give it an "evaluate test" so it will write me 1 point anyway, which is wrong. Some ideas?
function check(){
var question1 = document.querySelector('input[name="question1"]:checked');
var question2 = document.querySelectorAll('input[value="question2"]:checked', 'input[value="question2"]:checked');
var correct = 0;
if (question1 !=null && question1.value == " Červená, Zelená, Modrá") {
correct++;
}
if (question4 !=null &&question4.value == "Rastrová grafika","Vektorová grafika"){
correct++;
}
document.getElementById("number_correct").innerHTML = "Máš " + correct + " otázky/otázek správně.";
}
<form class="quiz">
<p style="font-weight: 900">V RGB modelu se jedná o jaké barvy?</p>
<input type="radio" class='question1' name="question1" value=" Červená, Zelená, Modrá"> Červená, Zelená, Modrá<br>
<input type="radio" class='question1' name="question1" value=" Červená, Zelená, Žlutá"> Červená, Zelená, Žlutá<br>
<input type="radio" class='question1' name="question1" value=" Černá, Fialová, Modrá"> Červená, Fialová, Modrá<br>
</form>
<form class="quiz">
<p style="font-weight: 900">Způsoby jakým počítače ukládají a zpracovávají obrazové informace se nazývají? (Vyber dvě možnosti)</p>
<input type="checkbox" class='question2' name="question4" value=" 3D grafika"> 3D grafika<br>
<input type="checkbox" class='question2' name="question4" value=" Vektorová grafika"> Vektorová grafika<br>
<input type="checkbox" class='question2' name="question4" value=" Fotografika"> Fotografika<br>
<input type="checkbox" class='question2' name="question4" value=" Rastrová grafika"> Rastrová grafika<br>
</form>
<br>
<div id="number_correct"></div>

question2 needs to be the result of a call to querySelectorAll, not just querySelector. It will then be a list of all the checked elements (querySelector only returns the first matched element, no matter how many match the selector.
You would need to loop the list and see what it contains. You need to verify that only two boxes were checked, and that they were the correct ones.
Also in your code, the question4 variable isn't defined, and input[value="question2"]:checked will never match anything - there's no checkbox with that value, and looking for the value makes no sense anyway. Also your question2 checkboxes randomly had "question4" as their name. I've corrected those issues and a couple of other minor things.
Something like this will work better:
function check() {
var question1 = document.querySelector('input[name="question1"]:checked');
var question2 = document.querySelectorAll('input[name="question2"]:checked');
var correct = 0;
if (question1 != null && question1.value == "Červená, Zelená, Modrá") {
correct++;
}
var q2answers = ["Rastrová grafika", "Vektorová grafika"];
var correctQ2NumAnswers = (q2answers.length == question2.length);
var correctQ2AnswersCount = 0;
question2.forEach(function(el) {
if (q2answers.includes(el.value)) correctQ2AnswersCount++;;
});
if (correctQ2NumAnswers == true && correctQ2AnswersCount == q2answers.length) correct++;
document.getElementById("number_correct").innerHTML = "Máš " + correct + " otázky/otázek správně.";
}
document.querySelector("#check").addEventListener("click", check);
<form class="quiz">
<p style="font-weight: 900">V RGB modelu se jedná o jaké barvy?</p>
<input type="radio" class='question1' name="question1" value="Červená, Zelená, Modrá"> Červená, Zelená, Modrá<br>
<input type="radio" class='question1' name="question1" value="Červená, Zelená, Žlutá"> Červená, Zelená, Žlutá<br>
<input type="radio" class='question1' name="question1" value="Černá, Fialová, Modrá"> Červená, Fialová, Modrá<br>
</form>
<form class="quiz">
<p style="font-weight: 900">Způsoby jakým počítače ukládají a zpracovávají obrazové informace se nazývají? (Vyber dvě možnosti)</p>
<input type="checkbox" class='question2' name="question2" value="3D grafika"> 3D grafika<br>
<input type="checkbox" class='question2' name="question2" value="Vektorová grafika"> Vektorová grafika<br>
<input type="checkbox" class='question2' name="question2" value="Fotografika"> Fotografika<br>
<input type="checkbox" class='question2' name="question2" value="Rastrová grafika"> Rastrová grafika<br>
</form>
<br>
<div id="number_correct"></div>
<button type="button" id="check">
Check Answers
</button>

calculate value of Checked boxes using JS

I have the following html code:
I want to calculate the price associated with each checked box and display it in a text area after i click order (button). Pls help!
<div>
<form>
<fieldset > <legend>Resturant Menu:</legend>
<input type="checkbox" id = "menu" value="300">
<label> Chicken-------------------------- 300 AFN</label> <br>
<input type="checkbox" id = "menu" value="200">
<label> Chicken Baryani --------------- 200 AFN</label> <br>
<input type="checkbox" id = "menu" value="250">
<label> Chicken Kabab ----------------- 250 AFN</label> <br>
<input type="checkbox" id = "menu" value="100">
<label> Juice ----------------------------- 100 AFN</label> <br>
<input type="submit" id = "submit_btn" onclick = "calculate()">
</fieldset>
</form>
</div>

This is usually not how it works on StackOverflow, you have to try fixing it yourself. However, I'm bored so here is a solution with HTML + Javascript.
It is bad practice to declare multiple ids with the same name, use classes instead. I changed your code a little bit. You said you want to display the code in another field, so using a form for this is not necessary.
var menuItems = document.getElementsByClassName('menuItem');
var orderButton = document.getElementById('order_btn');
var totalArea = document.getElementById('total');
var afn = 0;
orderButton.addEventListener('click', function(e) {
e.preventDefault();
for (var i = 0; i < menuItems.length; i++) {
if (menuItems[i].checked) {
afn += +menuItems[i].value;
}
}
totalArea.innerHTML = "Total: " + afn + " AFN";
afn = 0;
});
<div>
<fieldset>
<legend>Resturant Menu:</legend>
<input type="checkbox" class="menuItem" value="300">
<label>Chicken-------------------------- 300 AFN</label>
<br>
<input type="checkbox" class="menuItem" value="200">
<label>Chicken Baryani --------------- 200 AFN</label>
<br>
<input type="checkbox" class="menuItem" value="250">
<label>Chicken Kabab ----------------- 250 AFN</label>
<br>
<input type="checkbox" class="menuItem" value="100">
<label>Juice ----------------------------- 100 AFN</label>
<br>
<button id="order_btn">Order</button>
</fieldset>
<p id="total">Total: 0 AFN</p>
</div>

function calculate(){
var allMenuItem = $('#menuItem input[type=checkbox]');
var totalPrice = 0;
$.each(allMenuItem, function(key, element){
if($(this).is(":checked")){
totalPrice += parseFloat($(this).val());
}
});
alert("You order price is: "+ totalPrice + " Rs");
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<form>
<fieldset > <legend>Resturant Menu:</legend>
<div id="menuItem">
<input type="checkbox" id = "menu" value="300">
<label> Chicken-------------------------- 300 AFN</label> <br>
<input type="checkbox" id = "menu" value="200">
<label> Chicken Baryani --------------- 200 AFN</label> <br>
<input type="checkbox" id = "menu" value="250">
<label> Chicken Kabab ----------------- 250 AFN</label> <br>
<input type="checkbox" id = "menu" value="100">
<label> Juice ----------------------------- 100 AFN</label> <br>
<input type="button" value="Order" id = "submit_btn" onclick = "calculate()">
</div>
</fieldset>
</form>

Javascript help, randomizing quiz questions

i made some code recently but im wondering how to make the quiz choose 3 questions out of 6 instead of displaying 6 straight away. Help would be appreciated. I want the quiz to choose 3 questions at random, then if its reloaded have a chance to choose another 3 questions, out of a total pool of 6.
<script language="JavaScript">
var numQues = 6;
var numChoi = 3;
var answers = new Array(6);
answers[0] = "16";
answers[1] = "8";
answers[2] = "The Walking Dead";
answers[3] = "Batman v Superman";
answers[4] = "Tupac";
answers[5] = "#ATAME2016";
function getScore(form) {
var score = 0;
var currElt;
var currSelection;
for (i=0; i<numQues; i++) {
currElt = i*numChoi;
for (j=0; j<numChoi; j++) {
currSelection = form.elements[currElt + j];
if (currSelection.checked) {
if (currSelection.value == answers[i]) {
score++;
break;
}
}
}
}
score = Math.round(score/numQues*100);
form.percentage.value = score + "%";
var correctAnswers = "";
for (i=1; i<=numQues; i++) {
correctAnswers += i + ". " + answers[i-1] + "\r\n";
}
form.solutions.value = correctAnswers;
}
</script>
</head>
<body>
<form name="quiz">
1. How many movie trailers are on the movie page?<br>
<input type="checkbox" name="question1" value="10">10<br>
<input type="checkbox" name="question1" value="14">14<br>
<input type="checkbox" name="question1" value="16">16<br>
<p>
2. How many pages are on this website?<br>
<input type="checkbox" name="q2" value="8">8<br>
<input type="checkbox" name="q2" value="6">6<br>
<input type="checkbox" name="q2" value="7">7<br>
<p>
3. What's the most popular show this week?<br>
<input type="checkbox" name="q3" value="The Walking Dead">The Walking Dead<br>
<input type="checkbox" name="q3" value="Mandem on the wall">Mandem on the wall<br>
<input type="checkbox" name="q3" value="Cotchin with Ksara">Cotchin with Ksara<br>
<p>
4. What movie has made the most money this week in the box office?<br>
<input type="checkbox" name="q4" value="Ride along 2">Ride along 2<br>
<input type="checkbox" name="q4" value="Batman v Superman">Batman v Superman<br>
<input type="checkbox" name="q4" value="GasMan">GasMan<br>
<p>
5. Which star in the celebrity page is no longer alive?<br>
<input type="checkbox" name="q5" value="Tupac">Tupac<br>
<input type="checkbox" name="q5" value="50 Cent">50 Cent<br>
<input type="checkbox" name="q5" value="Bradley cooper">Bradley cooper<br>
<p>
6. What is our twitter account name (#)?<br>
<input type="checkbox" name="q6" value="#ATAME">#ATAME<br>
<input type="checkbox" name="q6" value="#ATAME2016">#ATAME2016<br>
<input type="checkbox" name="q6" value="#A2THETAME">#A2THETAME<br>
<p>
<input type="button" value="Get score" onClick="getScore(this.form)">
<input type="reset" value="Clear"><p>
Score = <input type=text size=15 name="percentage"><br>
Correct answers:<br>
<textarea name="solutions" wrap="virtual" rows="4" cols="40"></textarea>
</form>
</div>

You'll want to use a Math.random() function. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
A common example is found at: http://www.w3schools.com/jsref/jsref_random.asp
I'd try something like this, using jQuery:
// Hides all questions on page load.
$('.questions').hide();
// Randomly shows 3 questions.
for (var i=0; i<3; i++) {
var questionId = Math.floor((Math.random() * 6) + 1);
$('#question-' + questionId).show();
}
Then wrap your questions in wrapping <div> or <p> tags like this:
<div id="question-1" class="questions">
1. How many movie trailers are on the movie page?<br>
<input type="checkbox" name="question1" value="10">10<br>
<input type="checkbox" name="question1" value="14">14<br>
<input type="checkbox" name="question1" value="16">16<br>
</div>
Or this:
<p id="question-1" class="questions">
1. How many movie trailers are on the movie page?<br>
<input type="checkbox" name="question1" value="10">10<br>
<input type="checkbox" name="question1" value="14">14<br>
<input type="checkbox" name="question1" value="16">16<br>
</p>

How can i convert checkboxes into dropdown list?

I have few checkboxes and I want to convert them into dropdown list. I tried something but don't know at the end what to do?
<form id="form-wysija-2" class="widget_wysija" action="#wysija" method="post">
<p class="wysija-checkbox-label">Select list(s):</p>
<p class="wysija-checkbox-paragraph">
<label>
<input class="wysija-checkbox validate[required]" type="checkbox" value="1" name="wysija[user_list][list_id][]">
General Antiques
</label>
</p>
<p class="wysija-checkbox-paragraph">
<label>
<input class="wysija-checkbox validate[required]" type="checkbox" value="3" name="wysija[user_list][list_id][]">
Antique & Collectible Tools
</label>
</p>
</form>
and i tried following jQuery to convert these checkboxes into dropdown list. but don't getting to how to done this successfully.
jQuery(document).ready(function($){
var extra, checkBoxesName,
checkBoxlabel,
checkBoxes = $('.wysija-checkbox-paragraph');
var checkBoxesLabel = $('.wysija-checkbox-label');
checkBoxesName = checkBoxes.find('input').prop('name');
checkBoxlabel = checkBoxes.find('label').text();
checkBoxesLabel.append('<select name="'+checkBoxesName+'">'+extra+'</select>');
$('.wysija-checkbox-paragraph').each(function(n){
var dataText = $(this).find('label').text();
$('select[name='+checkBoxesName+']').append('<option value="'+n+'">'+dataText+'</option>');
});
//checkBoxes.remove();
});

Try this:
var checkBoxes = $('.wysija-checkbox-paragraph'),
checkBoxesLabel = $('.wysija-checkbox-label'),
checkBoxesName = checkBoxes.find('input').prop('name')
$select = $('<select name="' + checkBoxesName + '"></select>').appendTo(checkBoxesLabel);
checkBoxes.each(function (n) {
var dataText = $(this).find('label').text();
var dataValue = $(this).find('input').val();
$select.append('<option value="' + dataValue + '">' + dataText + '</option>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form-wysija-2" class="widget_wysija" action="#wysija" method="post">
<p class="wysija-checkbox-label">Select list(s):</p>
<p class="wysija-checkbox-paragraph">
<label>
<input class="wysija-checkbox validate[required]" type="checkbox" value="1" name="wysija[user_list][list_id][]" /> General Antiques
</label>
</p>
<p class="wysija-checkbox-paragraph">
<label>
<input class="wysija-checkbox validate[required]" type="checkbox" value="3" name="wysija[user_list][list_id][]" /> Antique & Collectible Tools
</label>
</p>
</form>
Note, that since checkboxes allow to select multiple values, you might want to add multiple attribute to selectbox, in order to allow the same behavior.

jQuery(document).ready(function($){
var extra, checkBoxesName,
checkBoxlabel,
checkBoxes = $('.wysija-checkbox-paragraph');
var checkBoxesLabel = $('.wysija-checkbox-label');
checkBoxesName = checkBoxes.find('input').prop('name');
checkBoxlabel = checkBoxes.find('label').text();
checkBoxesLabel.append('<select name="'+checkBoxesName+'">'+extra+'</select>');
$('.wysija-checkbox-paragraph').each(function(n){
var dataText = $(this).find('label').text();
$('.wysija-checkbox-paragraph').append('<select name="'+checkBoxesName+']" > <option value="'+n+'">'+dataText+'</option></select>');
});
//checkBoxes.remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form-wysija-2" class="widget_wysija" action="#wysija" method="post">
<p class="wysija-checkbox-label">Select list(s):</p>
<p class="wysija-checkbox-paragraph">
<label>
<input class="wysija-checkbox validate[required]" type="checkbox" value="1" name="wysija[user_list][list_id][]">
General Antiques
</label>
</p>
<p class="wysija-checkbox-paragraph">
<label>
<input class="wysija-checkbox validate[required]" type="checkbox" value="3" name="wysija[user_list][list_id][]">
Antique & Collectible Tools
</label>
</p>
</form>