I appreciate any help. I am writing this as a project I have in Pre-Cal. I am tasked with writing a webpage, based in notepad that will run the quadratic equation with the user inputting the variables. I have never written code before so while this is probably simplistic, it has taken me 3 weeks. The issue is correctly displaying complex number answers. I tried linking to "math.js" at the top but it had no effect. Here is what I am working with (I took off the explanations and bells and whistles) :
<html>
<head>
<script src="https://unpkg.com/mathjs#6.6.4/dist/math.js type="text/javascript"></script>
</head>
<body>
<label> Enter Variable "a"</label> <br>
<input type="text" id="a"> <br>
<label> Enter Variable "b"</label> <br>
<input type="text" id="b"> <br>
<label> Enter Variable "c"</label> <br>
<input type="text" id="c"> <br>
<input type="button" value="Solve" onclick="quad()"><br>
The Discriminant is:
<div id="dis"></div>
The 1st Root (also called zero) is:
<div id="res"></div>
The 2nd Root (also called zero) is:
<div id="res2"></div>
*Note that if the answers are not real numbers (a negative discriminant) the answer will read "NaN"*
<script>
function quad() {
var a = document.getElementById("a").value;
var b = document.getElementById("b").value;
var c = document.getElementById("c").value;
var Discriminant = (b*b-4*a*c);
var sroot = Math.sqrt(Discriminant);
var denominator =2*a;
var solution1 =(-b-sroot)/denominator;
var solution2 =(-b+sroot)/denominator;
document.getElementById("dis").innerHTML = Discriminant;
document.getElementById("res").innerHTML = solution1;
document.getElementById("res2").innerHTML = solution2;
}
</script>
</body>
</html>
Related
I have created 5 input text boxes using HTML and made a button while clicking the button the values will print the result input text box. The first 4 fields are my inputs and the last text field is my output. unable to debug the issue. kindly find the code and help to find the issue.
function JS(){
var h=document.getElementById('h').value;
var w=document.getElementById('w').value;
var g=document.getElementById('g').value;
var t=document.getElementById('t').value;
var total =(h+w+g+t);
document.getElementById('result').innerHTML=total;
}
<h2> Calculator</h2>
<input type="text" placeholder="value1" id="h">
<input type="text" placeholder="value2"id="w">
<input type="text" placeholder="value3" id="g">
<input type="text" placeholder="value4" id="t">
<input type="text" placeholder="result" id="result">
<!--
<p
id="result">
</p>
-->
<button id="btn" onClick="JS()">Calculate</button>
There are two keys to resolving your issue:
Coerce your inputs to numbers, which I'm doing by adding a + in front of the value assignments. If you don't do this, your values may be treated like strings and concatenated rather than added like numbers.
Set the value of the input element, not the innerHTML. If you'd rather use a <p> element, which it appears you commented out in your sample code (and which I restored for completeness of my answer), consider using innerText.
See example here:
function JS() {
var h = +document.getElementById('h').value;
var w = +document.getElementById('w').value;
var g = +document.getElementById('g').value;
var t = +document.getElementById('t').value;
let p_result = document.getElementById('p_result');
var total = (h + w + g + t);
document.getElementById('result').value = total;
p_result.innerText = total;
}
<h2> Calculator</h2>
<input type="text" placeholder="value1" id="h">
<input type="text" placeholder="value2" id="w">
<input type="text" placeholder="value3" id="g">
<input type="text" placeholder="value4" id="t">
<input type="text" placeholder="result" id="result">
<br>
<p id="p_result" style="color:red;"></p>
<br>
<button id="btn" onClick="JS()">Calculate</button>
function JS(){
var h=document.getElementById('h').value;
var w=document.getElementById('w').value;
var g=document.getElementById('g').value;
var t=document.getElementById('t').value;
var total =(Number(h)+Number(w)+Number(g)+Number(t));
document.getElementById('result').value =total;
}
.value instead of .innerHTML
also, you should convert inputs values to number cause instead of making the sum will be as consider them string( for example if you type 1 , 2 , 3 , 4 without converting to number will be 1234 if you convert to number will be 10
i'm really absolute beginner, started watching some programming videos.
I have installed VSC, but it's not showing any error when run.
Any program that is better than VSC?
I want to convert Input: Cipto to Output: 01100011 01101001 01110000 01110100 01101111
How do i do it? Please i need some easy code to understand.
function convert() {
var input = document.getElementById("name");
var ouput = document.getElementById("number").value;
}
output.value = "01100011 01101001 01110000 01110100 01101111";
<html>
<head>
<body>
<script src = "1.js"></script>
Type in Cipto:
<br>
<input type = "text" id="name";
<br>
<button onClick="convert();">Convert!</button>
<br>
<br>
Output:
<br>
<input type = "number" value="number";
</form>
</body>
</head>
</html>
firstly you had a typo and wrote ouput instead of oputput. second, you tried to access a variable that was declared in a function from outside of his scope and it's not possible. lastly in HTML input, you should close the tag like a normal tag.
function convert() {
var input = document.getElementById("name");
var output = document.getElementById("number");
output.value = "01100011 01101001 01110000 01110100 01101111";
}
<html>
<head>
<body>
<script src = "1.js"></script>
Type in Cipto:
<br>
<input type="text" id="name">
<br>
<button onClick="convert();">Convert!</button>
<br>
<br>
Output:
<br>
<input type="text" id="number" value="number">
</form>
</body>
</head>
</html>
this code will work but it will always enter the same output to the input field.
if you would like to convert every input to its binary form you should write the convert function differently like so:
function convert() {
var input = document.getElementById("name").value;
var output = document.getElementById("number");
output.value = "";
for (var letter of input) {
output.value += letter.charCodeAt(0).toString(2) + " ";
}
}
<html>
<head>
<body>
<script src = "1.js"></script>
Type in Cipto:
<br>
<input type="text" id="name">
<br>
<button onClick="convert();">Convert!</button>
<br>
<br>
Output:
<br>
<input type="text" id="number">
</form>
</body>
</head>
</html>
I am pretty new here so Don't be mad at me if I get the answer wrong, but you have mistakes both in the html code and the js code.
The html I've modified:
<head>
<body>
<script src = "1.js"></script>
Type in Cipto:
<br>
<input type = "name" id="name">
<br>
<button onClick="convert();">Convert!</button>
<br>
<br>
Output:
<br>
<input id="number">
</form>
</body>
</head>
</html>
and the JavaScript:
function convert() {
var input = document.getElementById("name").value;
var output = document.getElementById("number");
output.value = "";
for(var i = 0; i < input.length; i++) {
document.getElementById("number").value += input[i].charCodeAt(0).toString(2) + " ";
}
}
First on html on both input forms, I've removed everything and just added an id
And in the js function I've went through every character of the input string and converted the ascii value of that character into binary. And that's it!
Hope I helped.
So I am fairly new to Javascript, and I am working on some code that converts decimal numbers to binary numbers. However when I run this program, I can't seem to get the output I am looking for. The best I have done was get my function to output an exact number already inside of the function, when I am instead trying to get an output that is generated from any number typed into the textbox? I'm not entirely sure where I am going wrong with this. I feel like there is something I am clearly missing, but I can't seem to grasp exactly what it is. I've been using codecademy and w3schools to gain more knowledge of JavaScript, but if anyone has any other resources that helped them when they first started programming that would be great!
<!DOCTYPE html>
<html>
<body>
<p>Convert from Decimal to Binary:</p>
<form method = "post">
<p id = "demo">
<label for="decNum"></label>
<input name="decNum" type="text">
<button onclick="toBinary()">Enter</button>
</p>
</form>
<script>
function toBinary() {
document.getElementById("demo").innerHTML =
parseInt(num,10).toString(2);
}
</script>
</body>
</html>
It's because num doesn't have a value.
Try this:
<p>Convert from Decimal to Binary:</p>
<form method = "post">
<p id = "demo">
<label for="decNum"></label>
<input name="decNum" type="text" id="decNum">
<button onclick="toBinary()">Enter</button>
</p>
</form>
<script>
function toBinary() {
var num = document.getElementById("decNum").value;
document.getElementById("demo").innerHTML =
parseInt(num, 10).toString(2);
}
</script>
There are a few things I would change. First off, I would keep non form elements outside of the form. The major issue is that num doesn't have a value, but to ensure it works you will also want to take the event and use event.preventDefault() to make sure it doesn't submit the form. Try:
<!DOCTYPE html>
<html>
<body>
<p>Convert from Decimal to Binary:</p>
<form method="post">
<label for="decNum"></label>
<input id="field" name="decNum" type="text">
<button onclick="toBinary(event)">Enter</button>
</form>
<p id="demo"></p>
<script>
function toBinary(event) {
event.preventDefault();
var value = document.getElementById('field').value;
document.getElementById("demo").innerHTML =
parseInt(Number(value), 10).toString(2);
}
</script>
</body>
</html>
You're not defining num.
Grab it from the input as such:
function toBinary() {
const num = document.getElementById("textInput").value;
document.getElementById("demo").innerHTML = parseInt(Number(num),10).toString(2);
}
<p id = "demo"></p>
<label for="decNum"></label>
<input name="decNum" type="text" id="textInput">
<button onclick="toBinary()">Enter</button>
We've recently started doing Javascript in my HTML class, and I seem to be running into a problem in all of my programs that I can't quite pick out. I would ask the teacher, but I've been working at home and we're on break and this is just going to eat at me the whole time. I've looked at other answers to "function not defined" questions, and they haven't been doing it for me. So what is it that I've consistently been doing wrong? I'm willing to bet that something's amiss with my formatting.
<!DOCTYPE html>
<html>
<head><title>Area and Perimeter of a trapezoid</title></head>
<center><body>
<h1>Area and Perimeter of a Trapezoid</h1>
<p>Enter the first base length:
<input id="b1" type="text"> </br>
Enter the second base length:
<input id="b2" type="text"> </br>
Enter the height of the trapezoid:
<input id="height" type="text"> </br>
Enter the length of the sides of the trapezoid:
<input id="side" type="text"> </br>
</p>
<button type="button" onclick="trapArea()">Area</button>
<p id="area"></p>
<button type="button" onclick="trapPer()">Perimeter</button>
<p id="perimeter"></p>
<script>
function trapArea()
{
var b1=document.getElementById("b1");
var b2=document.getElementById("b2");
var height=document.getElementById("height");
var area=(.5*(b1+b2)*height);
document.getElementById("area").innerHTML="The area of this trapezoid is "+area+".</br>".
}
function trapPer()
{
var b1=document.getElementById("b1");
var b2=document.getElementById("b2");
var side=document.getElementById("side");
var perimeter=(b1+b2+side);
document.getElementById("perimeter").innerHTML="The perimeter of this trapezoid is "+perimeter+".</br>".
}
</script>
</center>
</body>
</html>
you are using your dom elements (htmlObjects) instead of their values (text, that in this case can be parsed as number). Try this
function trapArea()
{
var b1=document.getElementById("b1").value;
var b2=document.getElementById("b2").value;
var height=document.getElementById("height").value;
console.log(b1,b2,height);
var area=(.5*(b1+b2)*height);
document.getElementById("area").innerHTML="The area of this trapezoid is "+area+".</br>";
}
Replace the last periods of
document.getElementById("area").innerHTML="The area of this trapezoid is "+area+".</br>".
and
document.getElementById("perimeter").innerHTML="The perimeter of this trapezoid is "+perimeter+".</br>".
with a semicolon ;
This is a simple one, I'm new to javascript, but I haven't found any existing answers that can help with this:
I started with a simple calculator that would convert one unit, the Cent (a musical unit of note frequency difference) to a decimal.
<html>
<head>
<script language="JavaScript">
function tun(form) {
var i = parseFloat(form.Cents.value, 10);
var o = 0;
p = i / 3986.313714
o = Math.pow(10, p)
form.Decimal.value = o;
}
</script>
</head>
<body>
<FORM>Cents:
<INPUT NAME="Cents" VALUE="0" MAXLENGTH="15" SIZE=15>
<p>Click to Convert
<INPUT NAME="calc" VALUE="Calculate" TYPE=BUTTON onClick=tun(this.form)>
<p>Decimal:
<INPUT NAME="Decimal" SIZE=15>
</FORM>
</body>
</html>
Now I want to change this to a converter for many types of units into each other, using the Decimal as a go-between. I'd like the 'input unit' and 'output unit' to be selectable from dropdown menus.
Here's where I am so far:
<html>
<head>
<script language="JavaScript">
function tun(form) {
var i = parseFloat(form.Cents.value, 10);
var o = 0;
p = i / 3986.313714
o = Math.pow(10, p)
form.Decimal.value = o;
}
</script>
<script>
function selectedunit() {
var mylist = document.getElementById("InputList");
document.getElementById("units").value = InputList.options[mylist.selectedIndex].text;
}
</script>
</head>
<body>
<form>Select units to convert from:
<select id="InputList" onchange="selectedunit()">
<option></option>
<option>Cents</option>
<option>Savarts</option>
<option>Jots</option>
<option>Merides</option>
</select>
<p>Selected Units:
<input type="text" id="units" </p>
<br>Cents:
<INPUT NAME="Cents" VALUE="0" MAXLENGTH="15" SIZE=15>
<p>Click to Convert
<INPUT NAME="calc" VALUE="Calculate" TYPE=BUTTON onClick=tun(this.form)>
<p>Decimal:
<INPUT NAME="Decimal" SIZE=15>
</FORM>
</body>
</html>
So I'd like to be able to selected any input unit and any output unit, then enter a value and calculate away - a bit like a currency converter
Any help?
Jim
Try and make two different javascript functions
AnyUnitToDecimalConverter() Function
DecimalToAnyUnitConverter() Function
Now suppose you need to convert from X unit to Y unit: Call AnyUnitToDecimalConverter(valueX), this will give you a decimal answer say AnsDecimal and now Call DecimalToAnyUnitConverter(AnsDecimal);