Creating a code using JS that can solve and graph quadratics. The parts I'm having an issue with would be finding and reducing axis of symmetry and vertex.
I've attempted to do the Axis of Symm but it does not work. The html code is for the box i would like the Axis of Symm to show up in. Thanks all!
<tr>
<td>
<a>Axis of Symmetry</a></br>
<input id="Axis" type="text" readonly="readonly"></input>
</br>
<input type="button" value="Clear" onclick="cancel()"></input>
</td>
</tr>
<script>
//Axis of Symmetry//
var AOS= ((-b) / (2*a));
document.getElementById('Axis').value = AOS;
</script>
Incorrect Code to Fix
First of all, the <input> tag does not have a closing tag (you shouldn't have </input> - it doesn't exist). Secondly, when you want to break a line, you use the <br /> tag. </br> is not a valid tag.
Working with Javascript onclick
It looks like you would be best off making a function (I call it calculate below) to get the values for your quadratic equation and then display the result for the axis of symmetry. See the Javascript code below to see how I would implement this.
A Solution
Below is a working example on how to calculate the axis of symmetry. I've made a functional JSFiddle here if you would like to see this code in action.
HTML
<p>
Please provide real constants a, b, and c in the boxes
below corresponding to the quadratic equation a*x^2 + b*x + c
</p>
<span style="display:inline-block">
<label for="a" style="display:block;">a</label>
<input type="number" name="a" id="a" />
</span>
<span style="display:inline-block">
<label for="b" style="display:block;">b</label>
<input type="number" name="b" id="b"/>
</span>
<span style="display:inline-block">
<label for="c" style="display:block;">c</label>
<input type="number" name="c" id="c" />
</span>
<input type="button" value="Calculate" onclick="calculate()">
<br />
<br />
<tr>
<td>
<a>Axis of Symmetry</a><br />
<input id="Axis" type="text" readonly="readonly" value="">
<br />
<input type="button" value="Clear" onclick="cancel()">
</td>
</tr>
Javascript (put this in between <style> and </style>):
// Calculate axis of symmetry
function calculate(){
var a = document.getElementById('a').value;
var b = document.getElementById('b').value;
var c = document.getElementById('c').value;
if(isNaN(a) || isNaN(b) || isNaN(c)){
window.alert("Please enter valid numbers for a, b, and c.");
}
else{
var AOS= ((-b) / (2*a));
document.getElementById('Axis').value = AOS;
}
}
Related
I'm trying to get my results to show up in the text box inputs as per my assignment but I can't get them to show up at all. The math isn't showing up at all so my big issue is that I can't get the code to show up in the box.
document.querySelector.("#buttonS").addEventListener("click", function(e) {
if (document.querySelector("#gallons").reportValidity()) {
let gallons = document.querySelector("#gallons").value;
if (document.querySelector("#quarts").checked) {
quartsTotal = gallons * 4;
document.querySelector("#quartsResult").placeholder = `quartsTotal`);
} else if (document.querySelector("#pints").checked) {
} else if (document.querySelector("#cups").checked) {
}
}
});
<form id="bakimg">
<input type="number" step=".01" min="0" id="gallons" required><label for="gallons"> How many gallons of milk do you have?</label>
<br>
<br>
<label for="conversion">Which conversion would you like?</label><br>
<input type="radio" value="quarts" name="gallonsC" checked><label for="quarts">Quarts</label>
<input type="radio" value="pints" name="gallonsC"><label for="pints">Pints</label>
<input type="radio" value="cups" name="gallonsC"><label for="cups">Cups</label>
</form>
<br>
<button type="button" id="buttonS">Submit</button><br>
<h1>Results</h1>
<br>
<input type="text" id="quartsResult" placeholder=""><label for="quartsResult">Quarts</label><br>
<input type="text" id="pintsResult"><label for="pintsResult">Pints</label><br>
<input type="text" id="cupsResult"><label for="cupsResult">Cups</label>
</div>
Check your syntax and make the following changes:
Check the browser console for errors and use the appropriate syntax:
document.querySelector.("#buttonS")
should be written like this:
document.querySelector("#buttonS") // No . after querySelector
Check the extra parentheses:
document.querySelector("#quartsResult").placeholder = `quartsTotal`); // <-- Remove the closing parens
Add the proper IDs to the HTML input elements (quarts, pints, cups):
<input type="radio" value="quarts" name="gallonsC" checked id="quarts">
<input type="radio" value="pints" name="gallonsC" id="pints">
<input type="radio" value="cups" name="gallonsC" id="cups">
Remove the backticks in order to use the variable value (otherwise quartsTotal is still a string):
`quartsTotal` -> quartsTotal
// Perhaps this is what you meant:
`${quartsTotal}`
Good luck with the assignment!
The code below should calculate the Pythagorean theorem. However, if the user puts 3 and 4 in the input fields and presses the button, the result does not show up. Could you help me find what's wrong?
function compute(form){
A=eval(form.a.value)
B=eval(form.b.value)
with (Math){
C=sqrt(((pow(a,2)+pow(b,2))))};
form.result.value=C;
}
<form>
<pre>
This program will calculate the hypotenuse of a triangle
Side 1 <input type="text" name="a" size=15>
Side 2 <input type="text" name="b" size=15>
Hypotenuse <input type="text" name="result" size=15>
<input type="button" value="calculate" onclick="compute(this.form)">
</pre>
</form>
Javascript is case sensitive, so after defining A one cannot access it by the lower case a.
Replacing A with a lower case a works
function compute(form) {
a = eval(form.a.value)
b = eval(form.b.value)
with(Math) {
C = sqrt(((pow(a, 2) + pow(b, 2))))
};
form.result.value = C;
}
<form>
<pre>
This program will calculate the hypotenuse of a triangle
Side 1 <input type="text" name="a" size=15>
Side 2 <input type="text" name="b" size=15>
Hypotenuse <input type="text" name="result" size=15>
<input type="button" value="calculate" onclick="compute(this.form)">
</pre>
</form>
You used a in the calcule instead of A, the variable you created before. Javascript is case sensitive, so var test is different of var Test.
In your case, just replace:
with (Math){
C=sqrt(((pow(a,2)+pow(b,2))))};
To this:
with(Math){
var C = sqrt( ( (pow(A ,2)+pow(B, 2)) ) );
};
Also, you should search how to organize your codes, thats make these simplier error easy to fix and avoid.
<!DOCTYPE HTML>
<html>
<body>
<form>
<pre>
This program will calculate the hypotenuse of a triangle
Side 1 <input type="text" name="a" size=15>
Side 2 <input type="text" name="b" size=15>
Hypotenuse <input type="text" name="result" size=15>
<input type="button" value="calculate" onclick="compute(this.form)">
</pre>
</form>
<script>
function compute(form){
var A = eval(form.a.value);
var B = eval(form.b.value);
with(Math){
var C = sqrt( ( (pow(A ,2)+pow(B, 2)) ) );
};
form.result.value = C;
}
</script>
</body>
</html>
I'm trying to find a validator in JS to check if a operator has been used or not ( we're making a simple calculator)so I tried to make a Function checkOperator(), But it was a dead-end and when I used it, it doesnt do anything.
function checkOperator(){
var operation = document.getElementsByClassName("operator");
var string = document.getElementsByName('show');
var lastChar = string.charAt(string.length-1);
if(lastChar === operation){
var restring =string.replace(operation,operation);
return restring;
}
}
<div id="cursor" class="rekenmachine">
<form name="rekenmachine">
<div>
<input id="cursor" type="text" name="show" value="">
<input id="cursor" type="button" name="Clear" value="C" onclick="rekenmachine.show.value =''">
</div>
<div class="input">
<input id="cursor" type="button" value="7" onclick="rekenmachine.show.value +='7'">
<input id="cursor" type="button" value="8" onclick="rekenmachine.show.value +='8'">
<input id="cursor" type="button" value="9" onclick="rekenmachine.show.value +='9'">
<input id="cursor" type="button" class="operator" value="/" onclick="rekenmachine.show.value +='/'">
</div>
</form>
</div>
I expected to only be able to Put one operator, since Eval can't calculate the string if there are multiple operators next to each other.
Main problem in your code is that you need to use value (and [0]) to access the actual text of (the first) element of getElementsByName or getElementsByClassName. See How do I get the value of text input field using JavaScript? .
(I recommend to use an id and getElementById() to get a unique element and avoid having to use [0])
Also, it's a bad idea in my opinion to use "string" as an identifier.
function checkOperator(){
var elementShow = document.getElementsByName('show')[0];
var text = elementShow.value;
var lastChar = text.charAt(text.length-1);
if(lastChar !== '/'){
elementShow.value = text + '/'
}
}
<div id="cursor" class="rekenmachine">
<form name="rekenmachine">
<div>
<input id="cursor" type="text" name="show" value="">
<input id="cursor" type="button" name="Clear" value="C" onclick="rekenmachine.show.value =''">
</div>
<div class="input">
<input id="cursor" type="button" value="7" onclick="rekenmachine.show.value +='7'">
<input id="cursor" type="button" value="8" onclick="rekenmachine.show.value +='8'">
<input id="cursor" type="button" value="9" onclick="rekenmachine.show.value +='9'">
<input id="cursor" type="button" class="operator" value="/" onclick="checkOperator()">
</div>
</form>
</div>
Remark :
I simplified the logic by explicitly using '/' here.
You can get the operator using document.getElementsByClassName("operator")[0].value; however if you have several operators the logic will be a bit more complicated than that. (since you don't just want to test for repetitions of the same operators, you cannot have +-/ the same as you can't have //.
But that would be something for another question ;)
function checkOperator(){
var operation = document.getElementsByClassName("operator");
var string = document.getElementsByName('show')[0].value;
console.log(string);
if(string.indexOf('/') > -1){
// here you can do what you want
alert('yes');
}else{
alert('no');
}
}
$(document).ready(function(){
$(document).click(function(){
checkOperator();
});
});
I currently have a chart pulling in data from a local JSON file. I now need to submit data via a form to update the chart dynamically. I know Highcharts has an addPoint method which should work, just need some guidance on how to pass my form data to this method.
<form id="add_data">
<p>
<input type="date" name="date" id="human" value="date" />
</p>
<p>
<input type="integer" name="amount" id="amount" value="amount" />
</p>
<p>
<input type="radio" name="request_type" id="human" value="human" />
<label for="human">Human</label>
</p>
<p>
<input type="radio" name="request_type" id="good" value="good" />
<label for="good">Good</label>
</p>
<p>
<input type="radio" name="request_type" id="bad" value="bad" />
<label for="bad">Bad</label>
</p>
<p>
<input type="radio" name="request_type" id="whitelist" value="whitelist" />
<label for="whitelist">Whitelist</label>
</p>
<input id="submit" type="submit" value="Submit">
</form>
The Highcharts docs use this as an example, which is what I am trying to use, but instead of hard coding the data I need to pass in my form data. I think...if I am totally off please let me know. Any help is appreciated.
$('#add_data input:radio[name=request_type]').click(function() {
$index = $('#add_data input:radio[name=request_type]').index(this);
});
$('#submit').click(function() {
var chart = $('#container').highcharts(),
amount = parseFloat($('#amount').val());
chart.series[$index].addPoint(amount);
});
In your click action you need to extract values from inputs. For example if you need to add point with value from input AMOUNT it should be used like:
$('#submit').click(function() {
var chart = $('#container').highcharts(),
point = parseFloat($('#amount').val());
chart.series[0].addPoint(point);
i += 1;
});
I'm trying to get the elements from textboxes nameBox and foodBox to be displayed in the paragraph id=message after the submit button is clicked, with the message:
“Hello <name in namebox>! We want to let you know that <food in foodbox> has 50% discount in our restaurant!”
But i can't figure out how to do that. I'm pretty sure i'm doing something (if not all) wrong but since i'm new at this i can't figure it out what.
<body>
<br>
<br>
<div>
<p id="message"></p>
</div>
Enter your name:
<input type="text" id="nameBox" value=""><br>
Enter your favorite food
<input type="text" id='foodBox' value=""><br>
<button id="submitButton">Submit</button>
<script>
var parent=document.getElementById("message");
var child=document.getElementById("nameBox");
parent.removeChild(child);
</script>
</body>
That's because parent is not the parent of child. To make it so, edit your code to put the two input elements inside the <p> tag:
<p id="message">
Enter your name:
<input type="text" id="nameBox" value=""><br>
Enter your favorite food
<input type="text" id='foodBox' value=""><br>
</p>
Here you go :
<html>
<head>
<script>
function showText(){
var name=document.getElementById("nameBox").value;
var food=document.getElementById("foodBox").value;
document.getElementById("msg").innerHTML="Hello " + name + " ! We want to let you know that has 50% discount in our restaurant! for " + food;
}
</script>
</head>
<body>
<br>
<br>
<div id="msg">
</div>
Enter your name:
<input type="text" id="nameBox" value=""/><br>
Enter your favorite food
<input type="text" id="foodBox" value=""/><br>
<input type="button" id="submitButton" onclick="showText()" value="Submit" />
</body>
</html>
You can make your alignments as you wish, try to use firebug (https://getfirebug.com/) in case of finding UI related issues. It is pretty easy to figure out what is wrong in the UI
Check your HTML. Maybe it should look like this?
<div id="message">
Enter your name:
<input type="text" id="nameBox" value=""><br>
Enter your favorite food
<input type="text" id='foodBox' value=""><br>
<button id="submitButton">Submit</button>
</div>
You can call function on clicking submit button and then change the message.
<input type="button" id="submit" value="Submit" onclick="somefunction()"/>
Here is the javascript:
function somefunction() {
var fieldNameElement = document.getElementById('message');
fieldNameElement.innerHTML = “Hello ! We want to let you know that has 50% discount in our restaurant!” ;
}
While changing the innerHTML you can add appropriate formatting tags as well.
Also you should add inputs in a table, and add border's and required formatting if required:
<table>
<tr>
<td>
Enter your name:
</td>
<td>
<input type="text" id="nameBox" value=""><br>
</td>
</tr>
<tr>
<td>
Enter your favorite food
</td>
<td>
<input type="text" id='foodBox' value=""><br>
</td>
</tr>
</table>
You can also think about using a Javascript library which provides lot of methods to make your life easy, would suggest JQUERY
Cheers !!