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.
Related
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>
I want to output a function secret(); so it will look like this:
AAAA-BBB-<random string>
But it returns this error:
Uncaught TypeError: secret is not a function
Here is the code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Random End String</title>
<script type="text/javascript">
function writeName() {
var welcomeMsg = document.getElementById('welcome');
var name = document.getElementById('name');
var alamat = document.getElementById('alamat');
var secret = secret();
var formContent = document.getElementById('entername');
welcomeMsg.innerHTML = "Your Identifier is " + name.value + "-" + alamat.value + "-" + secret + "";
formContent.innerHTML = "";
}
</script>
<script>
function secret() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 5; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
</script>
</head>
<body>
<p id="welcome"></p>
<form id="entername">
Your Name:<input type="text" id="name" /><br/> LockerID:
<input type="text" id="alamat" /><br/>
<input type="hidden" id="secret">
<input type="button" value="Submit" onclick="writeName();" />
</form>
</body>
</html>
Don't name the var secret change it to something else in this example secret1 works fine'.
EDIT: You also need to return your "secret text".
Full working example:
function writeName() {
var welcomeMsg = document.getElementById('welcome');
var name = document.getElementById('name');
var alamat = document.getElementById('alamat');
var secret1 = secret();
var formContent = document.getElementById('entername');
welcomeMsg.innerHTML = "Your Identifier is " + name.value + "-" + alamat.value + "-" + secret1 + "";
formContent.innerHTML = "";
}
function secret() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 5; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text
}
function writeName1() {
var welcomeMsg = document.getElementById('welcome');
var name = document.getElementById('name');
var alamat = document.getElementById('alamat');
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 5; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
var formContent = document.getElementById('entername');
welcomeMsg.innerHTML = "Your Identifier is " + name.value + "-" + alamat.value + "-" + text + "";
formContent.innerHTML = "";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Random End String</title>
</head>
<body>
<p id="welcome"></p>
<form id="entername">
Your Name:<input type="text" id="name" /><br/> LockerID:
<input type="text" id="alamat" /><br/>
<input type="hidden" id="secret">
<input type="button" value="Submit" onclick="writeName();" />
</form>
</body>
</html>
Your Name:<input type="text" id="name1" /><br/> LockerID:
<input type="text" id="alama1t" /><br/>
<input type="hidden" id="secret1">
<input type="button" value="Submit" onclick="writeName1();" />
Your local variable secret is hiding your function secret. Simply rename the variable to something else to fix this issue
function writeName(){
var welcomeMsg = document.getElementById('welcome');
var name = document.getElementById('name');
var alamat = document.getElementById('alamat');
var secret = secret(); //right here this is your issue
var formContent = document.getElementById('entername');
welcomeMsg.innerHTML = "Your Identifier is "+name.value+"-"+alamat.value+"-"+secret+"";
formContent.innerHTML = "";
}
I'm trying to clone multiple form elements of the same div using this code: The only problem is that only the first frequency value is being stored, not values from multiple entries like the device.
<script type="text/javascript">
$(document).ready(function() {
$('#btnAdd2').click(function() {
var num2 = $('.clonedInput2').length;
var newNum2 = new Number(num2 + 1);
var num3 = $('.clonedInput3').length;
var newNum3 = new Number(num2 + 1);
var newElem2 = $('#in' + num2).clone().attr('id', 'in' + newNum2);
newElem2.find(":button").remove();
newElem2.children(':first')
.attr('id', 'device' + newNum2)
.attr('name', 'device' + newNum2);
var newElem3 = $('#in2' + num2).clone().attr('id2', 'in2' + newNum2);
newElem3.children(':first')
.attr('id', 'frequency' + newNum2)
.attr('name', 'frequency' + newNum2);
$('#in' + num2).after(newElem2);
$('#btnDel2').attr('disabled','');
if (newNum2 == 4)
$('#btnAdd2').attr('disabled','disabled');
});
$('#btnDel2').click(function() {
var num2 = $('.clonedInput2').length;
$('#in' + num2).remove();
$('#btnAdd2').attr('disabled','');
if (num2 - 1 == 1)
$('#btnDel2').attr('disabled','disabled');
});
$('#btnDel2').attr('disabled','disabled');
});
</script>
<div id="in1" style="margin-bottom:4px;" class="clonedInput2">
Device(s): <input type="text" name="device1" id="device1" /> Frequency: <input type="text" name="frequency1" id="frequency1" />
<input type="button" id="btnAdd2" value="Add device" />
<input type="button" id="btnDel2" value="Remove device" />
</div>
<html>
<h1>MB calculator</h1>
<script type="text/javascript">
var level = "0";
var brawlpoints = "0";
var brawlenergy = "0";
var pointsmake = "0";
function setlv() {
level = document.forms["form"]["lv"].value;
alert("level = " + level);
var maxen = 95 + (level * 5);
var exptolv = 110 + (level * 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 calculatevalues() {
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()">
<br>
<input type="button" value="calculate" onclick="calculatevalues()">
</form>
<h1>LV calculator</h1>
</html>
Put where the problem is in bold, for some reason that button does nothing when pushed...
So yea, test it in html, someone i know who knows some of html/javascript seems to think the form is broken or something like that...
EDIT: got it to work, how to round down in javascript if anyone reads this?
EDIT: up, not down
You need to declare the maxen variable in the global scope
var level = "0"; var brawlpoints = "0"; var brawlenergy = "0";
var pointsmake = "0";
//declare the maxen variable here
var maxen = "0";
function setlv()
{
//left of your code
Are you expecting this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><h1>MB calculator</h1>
<script type="text/javascript">
var level = "0"; var brawlpoints = "0"; var brawlenergy = "0"; var pointsmake = "0";
var maxen;
function setlv()
{
level = document.forms["form"]["lv"].value;
alert("level = " + level);
maxen = 95+(level*5);
var exptolv = 110+(level*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 calculatevalues()
{
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()">
<br>
**<input type="button" value="calculate" onclick="calculatevalues()">**
</form>
<h1>LV calculator</h1>
</HTML>
maxen is declared as a local variable in the function setlv and you are trying to access it in another function. Make it global
UPDATE
Ok, after trying ".value" for god knows x amount of time again, it some how worked..... Problem solved. Thanks a lot for those who has responded.
UPDATE
How can I obtain the text(strings) from my form on my HTML page with Javascript?
I just want to take whatever was inputted into the text box and write into my XML file.
For example, if I type "HELLO" into the text box, I want "HELLO" written in the XML file.
I have tried both ".value" and ".text", they don't work. Also tried ".textcontent", no good too. I'm thinking that I need to use a different code.
Here's an image of what I'm trying to do:
http://img94.imageshack.us/img94/5677/sdfsdfsdfs.jpg
Here are the files if you want to mess with them personally:
http://www.mediafire.com/?e29t6ipatsqun70
Here's my HTML file:
<html>
<!--onSubmit="SaveXML(person);"-->
<head>
<title>Registration</title>
<link rel="stylesheet" type="text/css" href="CSS_LABs.css" />
</head>
<body>
<script type="text/javaScript" src="LoginJS.js"> </script>
<script type="text/javaScript" src="writeXML.js"> </script>
<div class="form">
<form id="Registration" name="reg" action="" method="get" onSubmit="initialize_array()">
Username:<input type="text" name="Usrname" id="Usrname" maxlength="10"/> <br/>
Password:<input type="password" name="Pswd" id="Pswd" maxlength="20"/> <br/>
<hr>
PersonID:<input type="text" name="PersonID" id="PersonID"/> <br>
<hr>
First Name:<input type="text" name="FirstName" id="FirstName"/> <br>
Last Name:<input type="text" name="LastName" id="LastName"/>
<hr>
DOB:<input type="text" name="DOB" id="DOB"/> <br>
<hr>
Gender:<input type="text" name="Gender" id="Gender"/> <br>
<hr>
Title:<input type="text" name="Title" id="Title"/> <br>
<hr>
<!--Secret Question:<br>
<select name="secret?">
</select> <br>
Answer:<input type="text" name="answer" /> <br> <br>-->
<input type="submit" value="submit" />
</form>
</div>
</body>
</html>
Here's my Javascript file:
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
var fso = new ActiveXObject("Scripting.FileSystemObject");
var FILENAME = 'G:\\CST2309 - Web Programming 1\\Copy of Take Home Exam - Copy\\PersonXML2.xml';
function SaveXML(UserData)
{
var usrn = document.getElementById("Username").text;
var pswd = document.getElementById("Pswd").text;
var pid = document.getElementById("PersonID").text;
var fname = document.getElementById("FirstName").text; //This is where I'm having trouble with
var lname = document.getElementById("LastName").text;
var gender = document.getElementById("Gender").text;
var dob = document.getElementById("DOB").text;
var title = document.getElementById("Title").text;
var file = fso.CreateTextFile(FILENAME, true);
file.WriteLine('<?xml version="1.0" encoding="utf-8"?>\n');
file.WriteLine('<PersonInfo>\n');
for (countr = 0; countr < UserData.length; countr++) {
file.Write(' <Person ');
file.Write('Usrname="' + UserData[countr][0] + '" ');
file.Write('Pswd="' + UserData[countr][1] + '" ');
file.Write('PersonID="' + UserData[countr][2] + '" ');
file.Write('FirstName="' + UserData[countr][3] + '" ');
file.Write('LastName="' + UserData[countr][4] + '" ');
file.Write('Gender="' + UserData[countr][5] + '" ');
file.Write('DOB="' + UserData[countr][6] + '" ');
file.Write('Title="' + UserData[countr][7] + '"');
file.WriteLine('></Person>\n');
} // end for countr
file.Write(' <Person ');
file.Write('Usrname="' + usrn + '" ');
file.Write('Pswd="' + pswd + '" ');
file.Write('PersonID="' + pid + '" ');
file.Write('FirstName="' + fname + '" ');
file.Write('LastName="' + lname + '" ');
file.Write('Gender="' + gender + '" ');
file.Write('DOB="' + dob + '" ');
file.Write('Title="' + title + '" ');
file.WriteLine('></Person>\n');
file.WriteLine('</PersonInfo>\n');
file.Close();
} // end SaveXML function --------------------
function LoadXML(xmlFile)
{
xmlDoc.load(xmlFile);
return xmlDoc.documentElement;
} //end function LoadXML()
function initialize_array()
{
var person = new Array();
var noFile = true;
var xmlObj;
if (fso.FileExists(FILENAME))
{
xmlObj = LoadXML(FILENAME);
noFile = false;
} // if
else
{
xmlObj = LoadXML("PersonXML.xml");
//alert("local" + xmlObj);
} // end if
var usrCount = 0;
while (usrCount < xmlObj.childNodes.length)
{
var tmpUsrs = new Array(xmlObj.childNodes(usrCount).getAttribute("Usrname"),
xmlObj.childNodes(usrCount).getAttribute("Pswd"),
xmlObj.childNodes(usrCount).getAttribute("PersonID"),
xmlObj.childNodes(usrCount).getAttribute("FirstName"),
xmlObj.childNodes(usrCount).getAttribute("LastName"),
xmlObj.childNodes(usrCount).getAttribute("Gender"),
xmlObj.childNodes(usrCount).getAttribute("DOB"),
xmlObj.childNodes(usrCount).getAttribute("Title"));
person.push(tmpUsrs);
usrCount++;
} //end while
if (noFile == false)
fso.DeleteFile(FILENAME);
SaveXML(person);
} // end function initialize_array()
You can use document.getElementById("UsrName").value to get tha value of a field in your form. Due to you use id for every field, so there is no problem using this code.
Something around: http://www.tek-tips.com/viewthread.cfm?qid=1143011&page=1
Here is an example of it working. I changed some functionality around just to show that the function was seeing the values correctly:
http://jsfiddle.net/73gbH/1
But like everyone said change .text to .value