Develop Reference

Combinig output of 2 function in javascript

I am relatively new to Javascript (biopython background) and I am trying to add a simple feature to a website.
In essence, I need to accept user input for 4 types of menus (check boxes) and then multiply the sum of the values ($) of selected menus by the number of days and number of people (user inputs using text fields).
Below are HTML and Javascript parts of the code
function multiply() {
var n_ppl = document.getElementsByName('people')[0].value;
var n_days = document.getElementsByName('days')[0].value;
return var out = n_ppl * n_days;
}
function totalIt() {
var n_ppl = document.getElementsByName('people')[0].value;
var n_days = document.getElementsByName('days')[0].value;
var input = document.getElementsByName("product");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseInt(input[i].value);
}
return var price = total
}
// not sure how can I get - var final = total * out
// after I get it I can finally do - document.getElementsByName("total")[0].value = "$" + final.toFixed(2);
<br> Breakfast <input name="product" value="12" type="checkbox" onclick="totalIt()" /> <br>
<br> First Meal <input name="product" value="20" type="checkbox" onclick="totalIt()" /> <br>
<br> Second Meal <input name="product" value="15" type="checkbox" onclick="totalIt()" /> <br>
<br> Craft Service <input name="product" value="10" type="checkbox" onclick="totalIt()" /> <br>
<br> Number of People <input type="text" name="people"> <br>
<br> Number of Days <input type="text" name="days"> <br>
<br> Total: <input value="$0.00" readonly="readonly" type="text" name="total" />
I apologize to all web developers for my pythonic style in advance.
I should also mention that both functions work perfectly fine separately but even without trying to multiply their outputs (i.e. even if their code is present next to each other), nothing works.
I will be really grateful for your help!

You need only one function to iterate over your inputs.
Do not use inline JavaScript it's sign of bad coding habits, and makes the application hard to debug. Keep your JS in one place and make use of Element.addEventListener()
Use Node.querySelector() and Node.querySelectorAll()
Use name="product[]" syntax when handling similar names. This will be submitted to the backend as an array of values.
You can use Array.prototype.reduce() to reduce (accumulate) all your '[name="product[]"]:checked' chechboxes values to a single integer
Place your <script> code right before the closing </body> tag
const EL_menu = document.querySelector("#menu");
const calcPrice = evt => {
const price = [...EL_menu.querySelectorAll('[name="product[]"]:checked')]
.reduce((n, el) => (n += +el.value, n), 0);
const nPers = +EL_menu.querySelector('[name="people"]').value || 1;
const nDays = +EL_menu.querySelector('[name="days"]').value || 1;
const total = price * nPers * nDays;
EL_menu.querySelector("[name=total]").value = `\$${total.toFixed(2)}`;
}
EL_menu.querySelectorAll("input").forEach(el => el.addEventListener('input', calcPrice));
#menu label { display: block; }
<div id="menu">
<label><input type="checkbox" name="product[]" value="12"> Breakfast</label>
<label><input type="checkbox" name="product[]" value="20"> First Meal</label>
<label><input type="checkbox" name="product[]" value="15"> Second Meal</label>
<label><input type="checkbox" name="product[]" value="10"> Craft Service</label>
<label><input type="number" name="people" value="1" min="1"> Number of People</label>
<label><input type="number" name="days" value="1" min="1"> Number of Days</label><br>
Total: <input type="text" name="total" value="$0.00" readonly="readonly">
</div>

Javascript not behaving as expected. Unable to identify cause.

in an attempt to make practical use of the skills I am learning on my web development course I am trying to create a website about the Vikings for my partner's Primary school class.
I have managed to get the HTML and CSS as I want it, but I'm struggling a little with the Javascript. it all looks fine to my mind but doesn't run as intended.
I have a quiz and a submit button. When clicked this button will reference a "checkresults" function in my .js file.
This should then calculate a result between 0 - 3 and post this result into the HTML page. I have designed the box the results will show in to be invisible until the "Submit" button is clicked. However, when ran the results box appears for only a second before disappearing and I cannot figure out why.
any help or advice would be very much appreciated!
//JAVASCRIPT//
function checkresults() {
var question1 = document.quiz.question1.value;
var question2 = document.quiz.question2.value;
var question3 = document.quiz.question3.value;
var correct = 0;
if (question1 == "793") {
correct++;
}
if (question2 == "Shield") {
correct++;
}
if (question3 == "1066") {
correct++;
}
var message = ["You're a real Viking!", "Not bad but you can do better!",
"Odin would not be pleased with your effort!"];
var range;
if (correct < 1) {
range = 2;
}
if (correct > 0 && correct < 3) {
range = 1;
}
if (correct > 2) {
range = 0;
}
document.getElementById("afterSubmit").style.visibility = "visible"
document.getElementById("message").innerHTML = message[ramge];
document.getElementById("correct").innerHTML = "You got " + correct + "
correct!";
}
//HTML//
<form id="quiz" name="quiz">
<p>When did the Vikings first invade Britain?</p>
<input type="radio" id="mc" name="question1" value="1066" />1066<br />
<input type="radio" id="mc" name="question1" value="793" />793<br />
<input type="radio" id="mc" name="question1" value="411" />411<br />
<input type="radio" id="mc" name="question1" value="1999" />1999<br />
<p>what did every man need before he was allowed to go Viking?</p>
<input type="radio" id="mc" name="question2" value="Shield" />Shield<br />
<input type="radio" id="mc"name="question2" value="Sword" />Sword<br />
<input type="radio" id="mc"name="question2" value="Cloak" />Cloak<br />
<input type="radio" id="mc" name-"question2" value="Gold" />Gold<br />
<p>when did the Viking age end?</p>
<input type="radio" id="mc" name="question3" value="793" />793<br />
<input type="radio" id="mc" name="question3" value="1999" />1999<br />
<input type="radio" id="mc" name="question3" value="1066" />1066<br />
<input type="radio" id="mc" name="question3" value="1500" />1500<br />
<input type="submit" id="button" value="Lets see how you did!" onclick =
"checkresults();">
</form>
<div id="afterSubmit">
<p id="message"></p>
<p id="correct"></p>
//CSS//
#afterSubmit {
visibility: hidden;
border-color: red;
border-style: solid;
border-width: 5px;
}

Your page is refreshing.
The best way to change this would be to move the function to the form onsubmit event.
//Remove the onclick
<input type="submit" id="button" value="Lets see how you did!" onclick="checkresults();">
Add the function and return false to the event on the form, so it cancels submission
//Add the onsubmit, notice the return false, so it cancels submission
<form id="quiz" name="quiz" onsubmit="checkresults();return false;">

Use another attribute instead of the input value to update total

basically the below code creates a order total in the id="total" span depending on which checkbox/radio buttons are selected. The total is changed by the value of the checkbox/radio buttons however i was wondering if there's any other way to change the total without using the inputs value because its needed in the next part of the form. Maybe another input attribute? I'm just not sure how to go about it.
All help will be greatly appreciated, thank you!
<form action="cart.php" method="post" name="builder">
<input checked="checked" type="radio" name="term" value="12" onclick='check_value(this, 1)' />
<input type="radio" name="term" value="24" onclick='check_value(this, 2)' />
<input type="radio" name="term" value="36" onclick='check_value(this, 3)' />
<input type="checkbox" name="cid[]" value="2" onclick='check_value(this, "")' />
<input type="checkbox" name="cid[]" value="3" onclick='check_value(this, "")' />
<input type="checkbox" name="cid[]" value="4" onclick='check_value(this, "")' />
Total Order: $<span id="total">36</span>
</form>
function check_value(curElem, id) {
// calculate Total
var total = 0;
var controls = document.getElementsByTagName('input');
for (var i = 0; i < controls.length; i++) {
if ((controls[i].type === 'radio' || controls[i].type === 'checkbox') && controls[i].checked) {
total = total + parseFloat(controls[i].value);
}
}
document.getElementById("total").innerHTML = total;
//alert("Total: " + total);
}

if you really want to use another attribute, use it
use an attribute of your choice, say nval and access it as controls[i].getAttribute("nval")
otherwise,
you can create plenty of hidden input fields in the page, for each checkbox to hold your value. and use these hidden fields to compute total.

jQuery & JavaScript Excercise: Adding Values On Condition

How do you make it calculate using JavaScript/jQuery based on condition:
on radio button 'change' event.
if user clicks "Yes" or "N/A", the value of text boxes with default values next to it will be added and reflected in Total
HTML:
<form>
<fieldset>
<input type="radio" name="remark[]" value="Yes" class="answer">Yes
<input type="radio" name="remark[]" value="No" class="answer">No
<input type="radio" name="remark[]" class="answer">N/A
<input type="text" name="point1" class="score" value="3">
</fieldset>
<fieldset>
<input type="radio" name="remark[]" value="Yes" class="answer">Yes
<input type="radio" name="remark[]" value="No" class="answer">No
<input type="radio" name="remark[]" class="answer">N/A
<input type="text" name="point2" class="score" value="2">
</fieldset>
Total<input type="text" name="total" class="result">
</form>

Vanilla Javascript
Note: these scripts associate with forms that have the class name calc
This script will associate with the form, so if you have multiple instances each form will calculate separately.
Basically for each form select all input's with a value of 'Yes' which are checked, then find the score for that field set and add it to the total
(Demo)
(function(){
"use strict";
function calculate() {
var forms = document.querySelectorAll('.calc'), form, i;
for (i = 0; form = forms[i]; i++) {
var total = 0;
var inputs = form.querySelectorAll('input[value="Yes"]:checked'), input, x;
for (x = 0; input = inputs[x]; x++) {
total += parseFloat(input.parentElement.lastElementChild.value);
}
form.lastElementChild.value = total;
}
}
calculate();
var inputs = document.querySelectorAll('.calc input'), input, x;
for(x = 0; input = inputs[x]; x++) {
input.onchange = calculate;
}
})();
jQuery
If you would like to use jQuery, this is the same script converted to jQuery
(Demo)
(function(){
"use strict";
function calculate() {
$('.calc').each(function(){
var total = 0;
$('input[value="Yes"]:checked', this).each(function(){
total += parseFloat($('input.score', this.parentElement).val());
});
$('input.result', this).val(total);
});
}
calculate();
$('.calc input').on('change', calculate);
})();

Not sure if I understand correctly, but first you'll need a few changes in your markup, radio groups should have different name so it'll be like remark[0] for first group and remark[1] for the second and so on. The "N/A" radios don't seem to have a value so I've added value="NA" to them. So your HTML will look like:
<form>
<fieldset>
<input type="radio" name="remark[0]" value="Yes" class="answer" />Yes
<input type="radio" name="remark[0]" value="No" class="answer" />No
<input type="radio" name="remark[0]" value="NA" class="answer" />N/A
<input type="text" name="point1" class="score" value="3" />
</fieldset>
<fieldset>
<input type="radio" name="remark[1]" value="Yes" class="answer" />Yes
<input type="radio" name="remark[1]" value="No" class="answer" />No
<input type="radio" name="remark[1]" value="NA" class="answer" />N/A
<input type="text" name="point2" class="score" value="2" />
</fieldset>Total
<input type="text" name="total" class="result" />
</form>
Then we just listen to radio's onchange and if Yes or N/A is selected for each group, we have it's value to the total. I used parseInt on values since they're string and it seemed the values were supposed to work as numbers. (2+3 should be 5 and not 23).
$('form input[type=radio]').on('change', function() {
var total = 0;
$('form fieldset').each(function(i) {
var point = parseInt($(this).find('input[type=text]').val());
var val = $(this).children('[name="remark[' + i + ']"]:checked').val();
if(val == "Yes" || val == "NA")
total += point;
});
$('input[name="total"]').val(total);
});
jsfiddle DEMO

using javascript to get radio button values of multiple forms

Note: I am just learning javascript. So please no jQuery answers yet. I'll get there.
I have 7 forms, all with groups of radio buttons, that appear one-by-one as one button of each form is clicked. Works fine. But by the time I'm done, I may have dozens of forms. There has to be a better way to get the value of a clicked button that creating a getValue for each form. Here's what I've done that works:
<script>
function initdisplay() {
document.getElementById("painLocation").style.display="block";
document.getElementById("painSystem").style.display="none";
document.getElementById("painTemporPatt").style.display="none";
document.getElementById("painIntensDur").style.display="none";
document.getElementById("painEtiology").style.display="none";
document.getElementById("painKav").style.display="none";
}
window.onload = initdisplay;
var painLocationValue = 0;
var painSystemValue = 0;
var painTemporPattValue = 0;
var painIntesDurValue = 0;
var painEtiologyValue = 0;
var painKavValue = 0;
function getPainLocationValue() {
var radioButtons = document.getElementsByName("location");
for (var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) {
painLocationValue = radioButtons[i].value;
document.getElementById("painLocation").style.display="none";
document.getElementById("painSystem").style.display="block";
alert(painLocationValue);
}
}
}
// ... other similar methods here
function getPainKavValue() {
var radioButtons = document.getElementsByName("kav");
for (var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) {
painKavValue = radioButtons[i].value;
document.getElementById("painKav").style.display="none";
alert(radioButtons[i].value);
}
}
}
</script>
</head>
Then the HTML looks like this:
<body>
<form id="painLocation" action="">
<p class="formPainCode">Q1: What is the location of your ailment?</p>
<input type="radio" name="location" value="000" onclick="getPainLocationValue()"> Head, Face, Mouth<br><br>
<input type="radio" name="location" value="100" onclick="getPainLocationValue()"> Cervical (neck) Region<br><br>
<input type="radio" name="location" value="200" onclick="getPainLocationValue()"> Upper Shoulder and Upper Limbs<br><br>
<input type="radio" name="location" value="300" onclick="getPainLocationValue()"> Thoracic (chest) Region<br><br>
<input type="radio" name="location" value="400" onclick="getPainLocationValue()"> Abdominal Region<br><br>
<input type="radio" name="location" value="500" onclick="getPainLocationValue()"> Lower Back, Lumbar Spine, Sacrum, Coccyx<br><br>
<input type="radio" name="location" value="600" onclick="getPainLocationValue()"> Lower Limbs<br><br>
<input type="radio" name="location" value="700" onclick="getPainLocationValue()"> Pelvic Region<br><br>
<input type="radio" name="location" value="800" onclick="getPainLocationValue()"> Anal, Perineal, Genital Region<br><br>
<input type="radio" name="location" value="900" onclick="getPainLocationValue()"> More than one location<br><br>
</form>
...
<form id="painKav" action="">
<p class="formPainCode">Q11: On which side of your body is your ailment?</p>
<input type="radio" name="kav" value="R" onclick="getPainKavValue()"> Right<br><br>
<input type="radio" name="kav" value="L" onclick="getPainKavValue()"> Left<br><br>
<input type="radio" name="kav" value="C" onclick="getPainKavValue()"> Center<br><br>
<input type="radio" name="kav" value="M" onclick="getPainKavValue()"> More than one side<br><br>
</form>
</body>
</html>

After another couple of frustrating hours, I dropped my "no jQuery" condition. The rest was simple. I used the following code to detect a click, and get the value of the button clicked. And since I expected some of my forms to include input types other than radio buttons, I changed that as well. At this point, the jQuery looks like this:
<script>
$(document).ready(function () {
$("input").click(function() {
var painCode = $(this).val();
alert("The painCode for this person is " + painCode);
});//end click function
}); //end document ready
</script>
I cleaned up the html. A typical form now looks like this:
<div id="painIntensDur">
<form class="painCodeForm" action="">
<p class="formPainCode">Q4: If you experience pain from your ailment, which of the following best describes its intensity and duration? </p>
<input type="radio" name="intensdur" value=".1" > Mild and less than 1 month<br><br>
<input type="radio" name="intensdur" value=".8" > Mild and 1 to 6 months<br><br>
<input type="radio" name="intensdur" value=".9" > Mild and more than 6 months<br><br>
<input type="radio" name="intensdur" value=".4" > Medium and less than 1 month<br><br>
<input type="radio" name="intensdur" value=".2" > Medium and 1 to 6 months<br><br>
<input type="radio" name="intensdur" value=".3" > Medium and more than 6 months<br><br>
<input type="radio" name="intensdur" value=".7" > Severe and less than 1 month<br><br>
<input type="radio" name="intensdur" value=".5" > Severe and 1 to 6 months<br><br>
<input type="radio" name="intensdur" value=".6" > Severe and more than 6 months<br><br>
<input type="radio" name="intensdur" value=".0" > Not sure<br><br>
</form>
</div>
Thanks again to the excellent advice. I'm sure it will come in handy later.