We Keep Coding

Why is my JavaScript RGB Hex converter not working?

I made a RGB Hex converter in JavaScript. But my code is not working.
My problem: "First I typed a hex in hextxt input. Then, I pressed Hex to RGB button to convert my hex to rgb. But it is not working."
Here is my codes:
function rgb_to_hex() {
var r = +rtxt.value;
var g = +gtxt.value;
var b = +btxt.value;
var rhex1 = r.toString(16);
var ghex1 = g.toString(16);
var bhex1 = b.toString(16);
var hex1 = "Hex: #" + rhex1 + ghex1 + bhex1;
p.innerHTML = hex1;
}
function hex_to_rgb() {
var hex2 = +hextxt.value;
var rhex2 = hex2.charAt(0) + hex2.charAt(1);
var ghex2 = hex2.charAt(2) + hex2.charAt(3);
var bhex2 = hex2.charAt(4) + hex2.charAt(5);
var rgb = "RGB: " + rhex2 + ", " + ghex2 + ", " + bhex2;
p.innerHTML = rgb;
}
<input type="text" id="rtxt" />
<br>
<input type="text" id="gtxt" />
<br>
<input type="text" id="btxt" />
<br>
<input type="text" id="hextxt" />
<br>
<button onclick="rgb_to_hex()">RGB to Hex</button>
<br>
<button onclick="hex_to_rgb()">Hex to RGB</button>
<p id="p"></p>

function rgb_to_hex() {
var r = +rtxt.value;
var g = +gtxt.value;
var b = +btxt.value;
var rhex1 = r.toString(16);
var ghex1 = g.toString(16);
var bhex1 = b.toString(16);
var hex1 = "#" + rhex1 + ghex1 + bhex1;
document.getElementById("hextxt").value = hex1;
}
function hex_to_rgb() {
var hex2 = hextxt.value;
var rhex2 = hex2.charAt(1) + hex2.charAt(2);
var ghex2 = hex2.charAt(3) + hex2.charAt(4);
var bhex2 = hex2.charAt(5) + hex2.charAt(6);
document.getElementById("rtxt").value=parseInt(rhex2,16);
document.getElementById("gtxt").value=parseInt(ghex2,16);
document.getElementById("btxt").value=parseInt(bhex2,16);
}
<input type="text" id="rtxt" />
<br>
<input type="text" id="gtxt" />
<br>
<input type="text" id="btxt" />
<br>
<input type="text" id="hextxt" />
<br>
<button onclick="rgb_to_hex()">RGB to Hex</button>
<br>
<button onclick="hex_to_rgb()">Hex to RGB</button>

+hextxt.value code is incorrect. The correct code is hextxt.value.

JavaScript function is not working in ASP.NET application

Given below function is not working in my ASP.NET application.
function sum() {
var txtFirstNumberValue = document.getElementById('txtrd').value;
var txtsecondNumberValue = document.getElementById('txtintalment').value;
var txtthirdNumberValue = document.getElementById('txtprd').value;
var txtfourNumberValue = document.getElementById('Penality').value;
var txtFiveNumberValue = document.getElementById('txtint').value;
var txtsixNumberValue = document.getElementById('txtsbint').value;
var result = (parseFloat(txtFirstNumberValue) + parseFloat(txtSecondNumberValue) + parseFloat(txtthirdNumberValue) + parseFloat(txtfourNumberValue) + parseFloat(txtFiveNumberValue) + parseFloat(txtSecondNumberValue) + parseFloat(txtsixNumberValue)).toFixed(2);
if (!isNaN(result)) {
document.getElementById('txttp').value = result;
}
}
Please help. Thank you.

There is a typo error in txtSecondNumberValue variable you declare variable as txtsecondNumberValue and accessing as txtSecondNumberValue.
Please correct the variable name.
var txtsecondNumberValue = document.getElementById('txtintalment').value;
var result = (parseFloat(txtFirstNumberValue) + parseFloat(txtSecondNumberValue) + parseFloat(txtthirdNumberValue) + parseFloat(txtfourNumberValue) + parseFloat(txtFiveNumberValue) + parseFloat(txtSecondNumberValue) + parseFloat(txtsixNumberValue)).toFixed(2);
Here is the working example,
function sum() {
var txtFirstNumberValue = document.getElementById('txtrd').value;
var txtsecondNumberValue = document.getElementById('txtintalment').value;
var txtthirdNumberValue = document.getElementById('txtprd').value;
var txtfourNumberValue = document.getElementById('Penality').value;
var txtFiveNumberValue = document.getElementById('txtint').value;
var txtsixNumberValue = document.getElementById('txtsbint').value;
var result = (parseFloat(txtFirstNumberValue) + parseFloat(txtsecondNumberValue) + parseFloat(txtthirdNumberValue) + parseFloat(txtfourNumberValue) + parseFloat(txtFiveNumberValue) + parseFloat(txtsixNumberValue)).toFixed(2);
if (!isNaN(result)) {
document.getElementById('txttp').value = result;
}
}
div{
display:grid;
grid-template-columns:1fr 9fr;
}
input {
width:100px;
}
<div>First: <input id="txtrd" type="number" value="10">
Second: <input id="txtintalment" type="number" value="10">
Third: <input id="txtprd" type="number" value="10">
Fourth: <input id="Penality" type="number" value="10">
Fifth: <input id="txtint" type="number" value="10">
Sixth: <input id="txtsbint" type="number" value="10">
Result: <input id="txttp" type="number" value="" disabled>
</div>
<button type="button" onclick="sum()">Calculate</button>

how to get array values, on input field

So I have multiple table data insert I want to get input value on some field so I can calculate on another field. How can I do that if that is an array field?
I've tried using javascript but it's only working on first field (not array field).
function tot() {
var txtFirstNumberValue = document.getElementById('price').value;
var txtSecondNumberValue = document.getElementById('qty').value;
var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue);
if (!isNaN(result)) {
document.getElementById('total').value = result;
}
}
$(document).ready(function(){
$("#btn-add-form").click(function(){
var addi = parseInt($("#addi-form").val());
var nextform = addi + 1;
$("#insert-form").append("<b>Item Price " + nextform + " :</b>" +
"<input type='text' name='names[]' required>"
"<input id='price' type='text' name='price[]' onkeyup='tot();' required>"
"<input id='qty' type='text' name='qty[]' onkeyup='tot();' required>"
"<input type='text' name='total[]' required>"
$("#addi-form").val(nextform);
});
$("#btn-reset-form").click(function(){
$("#insert-form").html("");
$("#addi-form").val("1");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="btn-add-form">Add</button>
<button type="button" id="btn-reset-form">Reset</button><br><input type="text" name="names[]" required>
<input id="price" type="text" name="price[]" onkeyup="tot();" required>
<input id="qty" type="text" name="qty[]" onkeyup="tot();" required>
<input id="total" type="text" name="total[]" required>
<div id="insert-form"></div>
I expect that way works on added array table but it's not, it only affects field on my first table.

You can not assign the same ID to multiple DOM elements on the same page. I have updated your code a bit to use the item number with the ID. Like, for item 1 ID is price, for item 2 ID is price-2, for item 3 ID is price-3 and so on. Same done with qty and total.
You may try this code:
function sum_total() {
var totalSum = 0;
var calcTotalSum = document.getElementsByClassName("calc-total");
var totalItems = calcTotalSum.length;
var i = 0;
while(i < totalItems) {
if (calcTotalSum[i].value !== "") {
totalSum = totalSum + parseInt(calcTotalSum[i].value);
}
i += 1;
}
if(totalSum > 0) {
console.log("Total Sum is: ", totalSum);
}
}
function tot(event) {
var itemNo = event.target.getAttribute("data-item");
var txtFirstNumberValue = "";
var txtSecondNumberValue = "";
if (itemNo) {
txtFirstNumberValue = document.getElementById('price-' + itemNo).value;
txtSecondNumberValue = document.getElementById('qty-' + itemNo).value;
} else {
txtFirstNumberValue = document.getElementById('price').value;
txtSecondNumberValue = document.getElementById('qty').value;
}
var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue);
if (!isNaN(result)) {
if (itemNo) {
document.getElementById('total-' + itemNo).value = result;
} else {
document.getElementById('total').value = result;
}
}
sum_total();
}
$(document).ready(function(){
$("#btn-add-form").click(function(){
var addi = parseInt($("#addi-form").val());
var nextform = addi + 1;
$("#insert-form").append("<b>Item Price " + nextform + " :</b>" +
"<input type='text' name='names[]' required>" +
"<input id='price-" + nextform + "' data-item='" + nextform + "' type='text' name='price[]' onkeyup='tot(event);' required>" +
"<input id='qty-" + nextform + "' data-item='" + nextform + "' type='text' name='qty[]' onkeyup='tot(event);' required>" +
"<input id='total-" + nextform + "' class='calc-total' type='text' name='total[]' required>"
);
$("#addi-form").val(nextform);
});
$("#btn-reset-form").click(function(){
$("#insert-form").html("");
$("#addi-form").val("1");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="btn-add-form">Add</button>
<button type="button" id="btn-reset-form">Reset</button><br>
<input type="hidden" name="addi-form" id="addi-form" value=1 required>
<input type="text" name="names[]" required>
<input id="price" type="text" name="price[]" onkeyup="tot(event);" required>
<input id="qty" type="text" name="qty[]" onkeyup="tot(event);" required>
<input id="total" class="calc-total" type="text" name="total[]" required>
<div id="insert-form"></div>
Hope, it helps you.
EDITED: sum_total function to calculate the sum of the total amount.

I presume that you want to trigger the tot() function on the newly added table rows. For that purpose you need to:
call tot() function to bind to the newly added elements after they have been appended. Or use the jQuery bind method.
Use .class in place of #id attributes on the elemnts so that you can iterate through all of them using the class selector

How to create program to Calculate Resistors in Series using javascript?

i'm newbie in here. i want to create program to calculate resistors in series using HTML & javascript.
I have tried to make it with code below. there are 2 functions.
first, to create input fields automatically based on how many resistors you wants to input.
image 1.( i have created this function ).
and the second function is sum the total values of the input fields that have been created.
image 2. ( i'm not yet create this function )
how to create this ? could you complate the second function ? or any have other alternative ?
JAVASCRIPT :
< script >
function display() {
var y = document.getElementById("form1").angka1.value;
var x;
for (x = 1; x <= y; x++) {
var a = document.getElementById("container");
var newInput = document.createElement('div');
newInput.innerHTML = 'R ' + x + ': <input type="text" id="r_' + x + '" name="r_' + x + '"/>';
a.appendChild(newInput);
}
}
function count() {
//this function not yet created
}
</script>
HTML:
<form id="form1" name="form1" onsubmit="return false">
<label for="number">Input Qty of Resistors </label>
<input type="number" name="angka1">
<input type="submit" value="Display Input" onclick="display()">
<div id="container"></div>
<input type="submit" value="Count" onclick="count()">
</form>

Here is the working demo of what you want to achieve. Click Here
Note that here in demo I have use JQuery so please include jquery file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="number">Input Qty of Resistors </label>
<input type="number" id="angka1" />
<input type="button" value="Display Input" onclick="display()" />
<div id="container"></div>
<input type="button" value="Count" onclick="count()" />
<label id="totalCount"></label>
function display() {
document.getElementById("container").innerHTML = "";
var y = document.getElementById("angka1").value;
var x;
for (x = 1; x <= y; x++) {
var a = document.getElementById("container");
var newInput = document.createElement('div');
newInput.innerHTML = 'R ' + x + ': <input type="number" id="r_' + x + '" name="r_' + x + '" />';
a.appendChild(newInput);
}
}
function count() {
console.log("Count function is called.");
var total = 0;
$("#container input").each(function () {
total += Number($(this).val().trim());
console.log(total);
});
document.getElementById("totalCount").innerHTML = total;
}
Hope that will work for you.

What am i doing wrong in the following code?

<html>
<h1>MB calculator</h1>
<script type="text/javascript">
var level = "0"; var brawlpoints = "0"; var brawlenergy = "0"; var pointsmake = "0";
function setlv()
{
level = docuent.forms["form"]["lv"].value;
alert("level = " + level);
}
var maxen = 95+(lv*5);
var exptolv = 110+(lv*15);
function setbpbe()
{
brawlpoints = document.forms["form"]["bp"].value;
brawlenergy = document.forms["form"]["be"].value;
alert("points per brawl = " + brawlpoints + "; energy per brawl = " brawlenergy);
}
function pointsupdate()
{
pointsmake = document.forms["form"]["p2m"].value;
alert("you want to make " + pointsmake);
}
function calculate()
{
var math1 = pointsmake/brawlpoints + 1;
var math2 = brawlenergy*math1;
var math3 = maxen*1.75;
var math4 = math2/math3 + 1;
document.write("To achieve your goal it will take you " + math1 + " brawls, this will take you " + math2 + " energy, or " + math4 + " levels, assuming a 75% refill levels you.);
}
</script>
<form name="form">
level:
<input type="text" name="lv" value="0">
<br>
<input type="button" value="update level" onclick="setlv()">
<br>
points per brawl done:
<input type="text" name="bp" value="0">
<br>
energy per brawl done:
<input type="text name="be" value="0">
<br>
<input type="button" value="update brawl energy and points" onclick="setbpbe()">
<br>
how many points you want to make:
<input type="text" name="p2m" value="0">
<br>
<input type="button" value="set points you want to make" onclick="pointsupdate()">
</form>
<input type="button" value="calculate" onclick="calculate()">
<h1>LV calculator</h1>
</html>
I looked through it a few times and i can't tell what i am doing wrong...
Sorry for posting the whole thing but i couldn't even really narrow down where the error is, i checked it up against a similar code i have that works fine, i couldn't find a difference other then names which i was consistent with... the buttons are what aren't working. Thanks for any help.
Javascript Output Console
Uncaught ReferenceError: calculate is not defined test.html:64
Uncaught ReferenceError: pointsupdate is not defined test.html:61
Uncaught ReferenceError: setbpbe is not defined test.html:56
Uncaught ReferenceError: setlv is not defined test.html
javascript output console while clicking each button

you are missing lots of things: like
// lv is not defined anywhere before using here
var maxen = 95+(lv*5);
var exptolv = 110+(lv*15);
missing concat operator here
alert("points per brawl = " + brawlpoints + "; energy per brawl = " brawlenergy);
should be
alert("points per brawl = " + brawlpoints + "; energy per brawl = " + brawlenergy);
missing closing quote here
document.write("To achieve your goal it will take you " + math1 + " brawls, this will take you " + math2 + " energy, or " + math4 + " levels, assuming a 75% refill levels you.);
should be
document.write("To achieve your goal it will take you " + math1 + " brawls, this will take you " + math2 + " energy, or " + math4 + " levels, assuming a 75% refill levels you.");
and lots more..
Make habit of using javascript console so that you know where you went wrong with your code..

One spelling mistake is there, instead of document, you typed docuent. May be it's causing errors.