We Keep Coding

JS Turning Radio Button into algorithm param

I made a simple program that generates a random build for an NBA 2k21 MyPlayer for one of my classes. Every button the user clicks generates a random value for each trait.
I am now trying to alter the program to remember the user input for the height radio buttons and then generate a random position based on that user's selection.
I want the program to randomize between:
PG/SG if the height is between 6'2" and 6'5" or
SG/SF if the height is between 6'5" and 6'8" or
SF/PF if the height is between 6'8" and 6'10" or
PF/C if the height is between 6'10 and 6'11"
Originally the program was just 3 buttons that generates random values from an array, but now it consists of 3 buttons and a user selection of radio buttons. Here is what I had before I got stuck:
<h1>
2k Archetype Generator
</h1>
<p>
Choose Height
</p>
<form>
<input name="height" type="radio" id="h1"> 6'2"
<br>
<input name="height" type="radio" id="h2"> 6'3"
<br>
<input name="height" type="radio" id="h3"> 6'4"
<br>
<input name="height" type="radio" id="h4"> 6'5"
<br>
<input name="height" type="radio" id="h5"> 6'6"
<br>
<input name="height" type="radio" id="h6"> 6'7"
<br>
<input name="height" type="radio" id="h7"> 6'8"
<br>
<input name="height" type="radio" id="h8"> 6'9"
<br>
<input name="height" type="radio" id="h9"> 6'10"
<br>
<input name="height" type="radio" id="h10"> 6'11"
<br>
</form>
<br>
<button id="positionchoice" onclick="randpos()">
Position
</button>
<p id="pos">
</p>
<button id="primary" onclick="randprim()">
Primary
</button>
<p id="no1">
</p>
<button id="secondary" onclick="randsecond()">
Secondary
</button>
<p id="no2">
</p>
var p = document.getElementById("pos");
var skill1 = document.getElementById("no1");
var skill2 = document.getElementById("no2");
var height = ["6'2","6'3","6'4","6'5","6'6","6'7"
,"6'8","6'9","6'10","6'11"];
var primary = ["Shot Creating", "Playmaking", "Defensive"
,"Sharpshooting","3-Point","Rebounding"];
var secondary = ["Slasher", "Finisher", "Shooter",
"Ball Handler","Lockdown", "Two-Way"];
var arr = ["PG", "SG", "SF", "PF", "C"];
function randpos() {
}
function randprim() {
skill1.innerHTML = primary[Math.floor(Math.random()*primary.length)];
}
function randsecond() {
skill2.innerHTML = secondary[Math.floor(Math.random() * secondary.length)];
}

Hopefully this will help get you unstuck so that you can write the next part of your function. Here is how you can get the currently selected option:
function randpos() {
let height = document.querySelector("input[name='height']:checked").value;
height = parseInt(height);
}
<h1>
2k Archetype Generator
</h1>
<p>
Choose Height
</p>
<form>
<input name="height" type="radio" id="h1" value="74"> 6'2"
<br>
<input name="height" type="radio" id="h2" value="75"> 6'3"
<br>
<input name="height" type="radio" id="h3" value="76"> 6'4"
<br>
<input name="height" type="radio" id="h4" value="77"> 6'5"
<br>
<input name="height" type="radio" id="h5" value="78"> 6'6"
<br>
<input name="height" type="radio" id="h6" value="79"> 6'7"
<br>
<input name="height" type="radio" id="h7" value="80"> 6'8"
<br>
<input name="height" type="radio" id="h8" value="81"> 6'9"
<br>
<input name="height" type="radio" id="h9" value="82"> 6'10"
<br>
<input name="height" type="radio" id="h10" value="83"> 6'11"
<br>
</form>
<br>
<button id="positionchoice" onclick="randpos()">
Position
</button>
I have edited your <input/> elements to include a value attribute so that you can then select that directly from the JS. Additionally you may notice that these values are in inches only. You can make these values in feet and inches, like are still displayed to the user, but it is likely going to make your life easier implementing the next part of your function if you have a single number you can make comparisons with.
In the JavaScript since your button is not attached to a form you want to set up a query selector looking for any <input/> element with a name set to height. To get only the currently selected element we then look for the :checked pseudo-class selector. Finally we get the value of the element that is returned and assign it to a height variable. (Alternatively you can attach your button to the form if you give the form a name which then would allow you to process it in a more typical fashion)
Since you are likely going to want to make comparisons with this value you can then take the height variable, a string, and convert it to a number using the parseInt() function.

change the value of a label with using a form but without refresh the page

I would like to create a form that based on the input values, calculation results and enter it in a div / label / bit somewhere in the web page html.
an working similar to that of the currency converters online
(insert the number for the first currency and you can see the result without the page refresh, with use of the submit button or not)
this is a little piece of my code (I can not understand the concept/mechanism to do what I want as described above)
<form id="form" class="green" method="post">
<label class="title">
<span class="titolo-riga required">Number1</span>
<input id="firstId" class="small" type="number" name="number1" required="required" value="0" />
</label>
<label class="title">
<span class="titolo-riga required">Number2</span>
<input id="secondID" class="small" type="number" name="number2" required="required" value="0" />
</label>
<div class="submit"><input type="submit" onclick="return submitForm();" value="Submit"/></div>
</form>
<div><label id="printHere" class="result"></label></div>
this a basic script inside the html:
function submitForm(){
var a = parseInt($("#firstId").val());
var b = parseInt($("#secondID").val());
result = a+ b;

try this simple script with html:
<html>
<body>
<p>Click the button to calculate x.</p>
<button onclick="myFunction()">Add it</button>
<br/>Enter first number:
<input type="text" id="txt1" name="text1">
<br/>Enter second number:
<input type="text" id="txt2" name="text2">
<p id="demo"></p>
<script>
function myFunction() {
var y = document.getElementById("txt1").value;
var z = document.getElementById("txt2").value;
var x = +y + +z;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

If I understood it correctly, you are trying to retrieve to input values, do some mathematical operations with them, and return it to the page without refreshing it, if it's so:
make a change event listener on both of inputs, in that case:
$("#firstId").change(function() {
$("#thirdId").val(calculate());
});
$("#secondID").change(function() {
$("#thirdId").val(calculate());
});
make a calculation function:
function calculate() {
var a = parseInt($("#firstId").val());
var b = parseInt($("#secondID").val());
return a+ b;
}

Good Day Sir,
I would suggest you could bind this input value a few different ways to update it on the page, without requiring a refresh. The jQuery library is probably the easiest to implement over straight javascript. Are you familiar with the following functions?
Keyup/Blur?
I created this fiddle for you. Hopefully it helps.
https://jsfiddle.net/wkdjwzfv/
<script>
$(function(){
//val for firstid
$("#firstId").keyup(function() {
//val of firstId
var total = parseInt($(this).val()) + parseInt($("#secondID").val());
console.log(total);
$("#total").empty().append(total);
});
//for keyup for second
$("#secondID").keyup(function() {
var total = parseInt($(this).val()) + parseInt($("#firstId").val());
console.log(total);
$("#total").empty().append(total);
});
})
</script>

Try this html and jquery combination:
<form id="form" class="green">
<div class="element-number column1">
<label for="avanti-testa" class="title">
<span class="titolo-riga required">Number1</span>
<input id="firstId" class="small" type="number" min="0" max="100" name="number1" required="required" value="0" />
</label>
</div>
<div class="element-number column1">
<label for="avanti-testa" class="title">
<span class="titolo-riga required">Number2</span>
<input id="secondID" class="small" type="number" min="0" max="100" name="number1" required="required" value="0" />
</label>
</div>
<div id="answer"></div>
<button id="submitForm" type="button">Submit</button>
</form>
<script>
// assuming jQuery is loaded
(function($) {
$('#submitForm').on('click', function (e) {
e.preventDefault();
var answer = parseInt($('#firstId').val(), 10) + parseInt($('#secondId').val(), 10);
$('#answer').text(answer);
});
})(jQuery);
</script>

As an alternative solution I'd like to post a simplistic answer created with AngularJS. Here is the Plunker: http://plnkr.co/edit/46Xf23jUhrmaT2x31S0K?p=preview
The code would be:
<div class="col-md-2 col-md-offset-5 form-group">
<input class="form-control" type="number" ng-model="firstValue" />
<p class="text-center">+</p>
<input class="form-control" type="number" ng-model="secondValue" />
</div>
<div class="panel panel-primary col-md-2 col-md-offset-5 text-center">
{{ firstValue + secondValue }}
</div>
The classes are from Bootstrap, just for making it little bit nicer.

JavaScript Word Count - Calculation

I have a script to count the words in an attachment which works fine.
function loadDemo() {
WordCount.words("file_attach", function(words) {
document.getElementById("words").innerText = words;
});
var elt = document.getElementById("words");
var words = elt.options[elt.selectedIndex].value;
words = parseInt(words);
var tprice = (words /500) * 12;
document.getElementById("tprice").innerText=tprice;
}
I then wanted to calulate a price which is printed in span box below.
The word count is printed to its span, but price is not. Where have i gone wrong in my calculation?
<div id="result"></div>
<label for="name"><span>Name</span>
<input type="text" name="name" id="name" placeholder="Enter Your Name" />
</label>
<label for="email"><span>Email Address</span>
<input type="email" name="email" id="email" placeholder="Enter Your Email" />
</label>
<label for="file"><span>Attachment</span>
<input type="file" name="file_attach" id="file_attach" onChange="loadDemo()" />
</label>
<label for="words"><span>No. of Words</span>
<span id="words"></span>
</label>
<label for="tprice"><span>Price</span>
<span id="tprice"></span>
</label>
<label for="message"><span>Message</span>
<textarea name="message" id="message" placeholder="Enter Your Name"></textarea>
</label>
<label><span> </span>
<button class="submit_btn" id="submit_btn">Submit</button>
</label>
Above is HTML of form.
Thanks

Your JavaScript for looking up the words is:
var elt = document.getElementById("words");
var words = elt.options[elt.selectedIndex].value;
but the second line is what you'd use for retrieving values from a select dropdown. The element <span id="words"></span> however is not a select element. You need to use:
var elt = document.getElementById("words");
var words = elt.textContent;
Demo
As a side note, it's a bit unusual to use <label> tags for things that aren't form controls. Specifically there's no point in using the label's for attribute to point to a non-input element because they can't receive focus.

Printing radio button numeric values to a text box

I was just wondering how do Print the selected radio value to the text box dynamically, so that the value in the text box matches the value of the corresponding selected radio button, using javascript? Any help is greatly appreciated, I'm just starting out with javascript and am finding it tough!
p.s. I am only familiar with javascript so sorry to the people who helpfully posted JQuery solutions! I do appreciate it!
HTML Code:
<h2>Configuration</h2>
<div>
<input type ="radio" id="gtmanual" name="car" value="277790.00" checked="checked" >
<label for ="gtmanual">GT Manual - € 27,7790.00 </label>
<br>
<input type ="radio" id="gtauto" name="car" value="28,500.00" >
<label for ="gtauto">GT Automatic - € 28,500.00 </label>
<br>
<input type ="radio" id="gtsmanual" name="car" value="32,450.00">
<label for ="gtsmanual">GT-S Manual - € 32,450.00 </label>
<br>
<input type ="radio" id="gtmanual" name="car" value="33,155.00">
<label for ="gtsauto">GT-S Auto - € 33,155.00 </label>
<br>
<div class="col-sm-4">
<input type="text" id="total" readonly>
</div>
</div>
And here is the javascript code:
var total=0
var carcost=0
gtmanual=document.getElementById("gtmanual")
gtmanual=document.getElementListner("click" calculateCar, false);
window.onload=function calculateCar() {
var mycar=document.getElementByName("car");
for (var i=0; i<mycar.length; i++)
{
if (mycar[i].checked) {
carcost = parseFloat(mycar[i].value);
break;
}
var total+= total+carcost=0;
}
document.getElementById("total").value=total;
}

try this code.this is in javascript as per your requirement
<html>
<head>
</head>
<script>
function getvalue(temp)
{
document.getElementById("total").value=temp.value;
}
</script>
<h2>Configuration</h2>
<div>
<input type ="radio" id="gtmanual" name="car" value="277790.00" onclick="getvalue(this)">
<label for ="gtmanual">GT Manual - € 27,7790.00 </label>
<br>
<input type ="radio" id="gtauto" name="car" value="28,500.00" onclick="getvalue(this)">
<label for ="gtauto">GT Automatic - € 28,500.00 </label>
<br>
<input type ="radio" id="gtsmanual" name="car" value="32,450.00" onclick="getvalue(this)">
<label for ="gtsmanual">GT-S Manual - € 32,450.00 </label>
<br>
<input type ="radio" id="gtmanual" name="car" value="33,155.00" onclick="getvalue(this)">
<label for ="gtsauto">GT-S Auto - € 33,155.00 </label>
<br>
<div class="col-sm-4">
<input type="text" id="total" readonly>
</div>
</div>

I have created what you wanted but its done with jQuery:
Link to the full working demo - http://jsfiddle.net/b7YNp/
jQuery:
$('input[name="car"]').change(function(){
$('#total').val($('input[name="car"]:checked').val());
});

Here is your solution: http://jsfiddle.net/webcarvers/DU2AZ/
JS
$(document).ready(function(){
$("#total").attr("value", $("input:radio[name='car']:checked").val());
$("input").on('click', function(){
$("#total").attr("value", $("input:radio[name='car']:checked").val());
});
});

you can do by this simple JS-
example : click here
var rad = document.getElementsByName('car');
var value = null;
for(var i = 0; i < rad.length; i++) {
rad[i].onclick = function() {
value=document.querySelector('input[name="car"]:checked').value;
document.getElementById('total').value=value ;
};
}

Simple Gallon Calculator

I'm attempting to build a simple web form that takes 3 number inputs and outputs one number based on this formula: (a*b*c)/271).
This is the code I have but nothing is displayed in the output.
Clearly I have almost no clue what I'm doing.
I appreciate all help:
<body>
<img id="logo"src="images/a&l.png" alt="A&L Cesspool"/>
<h1>Grease Trap Gallon Calculator<h2>
<form name=calculator">
<input label="length" type="number" id="a">
<input label="width" type="number" id="b">
<input label="height" type="number" id="c">
<input type=Button value=Calculate onClick="gallons();">
<input name="OUTPUT" id="output" SIZE="4" maxlength="6" >
</form>
<script language="JavaScript" type="text/javascript">
<!--
function gallons() {
var LENGTH = document.calculator.a.value;
var WIDTH = document.calculator.b.value;
var HEIGHT = document.calculator.c.value;
var Total =(LENGTH*WIDTH*HEIGHT)/271;
document.calculator.OUTPUT.value = Total;
}
// -->
</script>

document.forms.calculator. There's no such thing as document.calculator. Also, form elements need name attributes to refer to them in form context, not IDs.
In other news
You have unclosed quotes
You have irregular naming conventions (OUTPUT, a, Total)
You have irregular quotes policy (sometimes you have, sometimes you don't).
So basically
<form name="calculator">
<input label="length" type="number" name="a">
<input label="width" type="number" name="b">
<input label="height" type="number" name="c">
<input type=Button value=Calculate onClick="gallons();">
<input name="OUTPUT" id="output" SIZE="4" maxlength="6">
</form>
function gallons() {
var LENGTH = document.forms.calculator.a.value;
var WIDTH = document.forms.calculator.b.value;
var HEIGHT = document.forms.calculator.c.value;
var Total = (LENGTH * WIDTH * HEIGHT) / 271;
document.forms.calculator.OUTPUT.value = Total;
}
Please grab a proper tutorial from MDN or some similar good source, and start reading.

Your call to document.calculator is not finding the element because its looking by id
change your form definition and it will work
<form name="calculator" id="calculator">