This forum always provided quick and good comments on different coding problems.
Today I want your help! Please!
I have a project in HTML and I want to add some features. I have to create a graph based on a function (f(x_r)). This function will depend on two parameters, x1 and x2.
I want that these 2 parameters to be from the input range (E_sursa and r_intern).
I've tried different methods, but I was not able to make for example x1 or x2 a parameter or a constant (from the function citire). I also try some old methods presented in this forum, but they did not work.
Sorry some words from the code are in Romanian.
The goal:
"var x1=1; var x2=1;" to update their values based on (E_sursa and r_intern or )
x1 from the function citire to be used in the first sript (this one with var x1=1;)
Edit
how could i replace var x1; with the value from var
'x1 = document.getElementById("r_sursa").value;'
I try to read it as a parameter ( to call a function), but it did not worked:
'function Resis() { return document.getElementById("r_sursa").value;} var x1=Resis();'
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
zoomEnabled: true,
title:{
text: "power"
},
axisY :{
includeZero:false
},
data: data // random generator below
});
chart.render();
}
var limit = 100;
var x1=1;
var x2=1;
var y = 0;
var data = [];
var dataSeries = { type: "line" };
var dataPoints = [];
for (var i = 0; i < limit; i += 1)
{ x_r = i/10;
y = x2*x2*x_r/((parseFloat(x1)+x_r)*(parseFloat(x1)+x_r));
dataPoints.push({
x: x_r,
y: y
});
}
dataSeries.dataPoints = dataPoints;
data.push(dataSeries);
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script></head>
<body>
<div id="chartContainer" style="height: 370px; width: 50%;">
</div>
<label for="r_sursa">resistance</label>
<input type="range" id="r_sursa" name="r_sursa" min="0" max="10" step="0.1">
<b id="demo1"></b>
<br>
<label for="E_sursa">voltage</label>
<input type="range" id="E_sursa" name="E_sursa" min="0" max="12" step="0.1">
<b id="demo2"></b>
<br>
<label for="R_sarcina">ohms</label>
<input type="range" id="R_sarcina" name="R_sarcina" min="0" max="10" step="0.1">
<b id="demo3"></b>
<br>
amps
<b id="demo4"></b>
<br>
power
<b id="demo5"></b>
<br>
<script>
function citire() {
var x1 = document.getElementById("r_sursa").value;
var x2 = document.getElementById("E_sursa").value;
var x3 = document.getElementById("R_sarcina").value;
var curent, putere;
y=parseFloat(x1)+parseFloat(x3);
curent = x2/(parseFloat(x1)+parseFloat(x3));
putere = x2*x2*x3/((parseFloat(x1)+parseFloat(x3))*(parseFloat(x1)+parseFloat(x3)));
document.getElementById("demo1").innerHTML = x1 + " Ω";
document.getElementById("demo2").innerHTML = x2 + " V";
document.getElementById("demo3").innerHTML = x3 + " Ω";
document.getElementById("demo4").innerHTML = curent.toFixed(2)+ " A";
document.getElementById("demo5").innerHTML = putere.toFixed(2)+ " W";
}
setInterval(function() { citire(); },0);
</script>
</body>
</html>
You should reassign the data attribute of the chart object and then invoke the render() method every time you have a new dataset.
For your needs of assigning x1 to the slider's value right at the load time, you can easily figure it yourself by reading my sample code below.
<!DOCTYPE HTML>
<html>
<head>
<script>
var limit = 100;
var chart;
function getData() {
var x1 = parseFloat(document.getElementById("r_sursa").value);
var x2 = 1;
var y = 0;
var data = [];
var dataSeries = {
type: "line"
};
var dataPoints = [];
for (var i = 0; i < limit; i += 1) {
x_r = i / 10;
y = x2 * x2 * x_r / ((parseFloat(x1) + x_r) * (parseFloat(x1) + x_r));
dataPoints.push({
x: x_r,
y: y
});
}
dataSeries.dataPoints = dataPoints;
data.push(dataSeries);
return data
}
window.onload = function() {
chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
zoomEnabled: true,
title: {
text: "power"
},
axisY: {
includeZero: false
},
data: getData() // random generator below
});
chart.render();
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 50%;">
</div>
<label for="r_sursa">resistance</label>
<input type="range" id="r_sursa" name="r_sursa" min="0" max="10" step="0.1">
<b id="demo1"></b>
<br>
<label for="E_sursa">voltage</label>
<input type="range" id="E_sursa" name="E_sursa" min="0" max="12" step="0.1">
<b id="demo2"></b>
<br>
<label for="R_sarcina">ohms</label>
<input type="range" id="R_sarcina" name="R_sarcina" min="0" max="10" step="0.1">
<b id="demo3"></b>
<br>
amps
<b id="demo4"></b>
<br>
power
<b id="demo5"></b>
<br>
<script>
function citire() {
var x1 = document.getElementById("r_sursa").value;
var x2 = document.getElementById("E_sursa").value;
var x3 = document.getElementById("R_sarcina").value;
var curent, putere;
y = parseFloat(x1) + parseFloat(x3);
curent = x2 / (parseFloat(x1) + parseFloat(x3));
putere = x2 * x2 * x3 / ((parseFloat(x1) + parseFloat(x3)) * (parseFloat(x1) + parseFloat(x3)));
document.getElementById("demo1").innerHTML = x1 + " Ω";
document.getElementById("demo2").innerHTML = x2 + " V";
document.getElementById("demo3").innerHTML = x3 + " Ω";
document.getElementById("demo4").innerHTML = curent.toFixed(2) + " A";
document.getElementById("demo5").innerHTML = putere.toFixed(2) + " W";
chart.options.data = getData();
chart.render()
}
setInterval(function() {
citire();
}, 0);
</script>
</body>
</html>
Related
I am stuck here with duch issue. There are 2 two entry boxes are for an amount and an interest rate (%).
If you click on the button, the page will show an overview of the balance until the amount have to be doubled.
Taking a simple numbers forexample 10 - is amount and 4 - is 4% intereste rate. So the result have to stop on amount of 20.
document.getElementById("button").onclick = loop;
var inputB = document.getElementById("inputB");
var inputC = document.getElementById("inputC");
var result = document.getElementById("result")
function loop() {
var s = inputB.value;
var r = inputC.value;
var doubleS = s * 2;
for (var i = 1; i <= doubleS; i++) {
s = ((r / 100 + 1) * s);
result.innerHTML += s + "<br>";
}
}
<! DOCTYPE html>
<html>
<body>
<br>
<input type="text" id="inputB" value="10"><br>
<input type="text" id="inputC" value="4"><br><br>
<button id="button">Klik</button>
<p> De ingevoerde resultaten: </p>
<p id="result"></p>
<script async src="oefin1.js"></script>
</body>
</html>
The issue is with your for loop bounds.
This will loop doubleX number of times: for (var i = 0; i < doubleX; i++)
This will loop until x surpasses doubleX: for (;x < doubleX;), which btw is better written with a while loop: while (x < doubleX)
document.getElementById("button").onclick = loop;
var inputB = document.getElementById("inputB");
var inputC = document.getElementById("inputC");
var result = document.getElementById("result")
function loop() {
var s = inputB.value;
var r = inputC.value;
var doubleS = s * 2;
result.innerHTML = '';
while (s < doubleS) {
s = ((r / 100 + 1) * s);
result.innerHTML += s + "<br>";
}
}
<input type="text" id="inputB" value="10"><br>
<input type="text" id="inputC" value="4"><br><br>
<button id="button">Klik</button>
<p> De ingevoerde resultaten: </p>
<p id="result"></p>
Easiest way is to just use a for loop without the convoluted math with s in the middle:
function loop() {
var s = inputB.value;
var r = inputC.value;
var doubleS = s * 2;
for (var i = s; i <= doubleS; i *= ((r / 100) + 1)) {
result.innerHTML += i + "<br>";
}
}
use a while loop and check is the value of s is bigger than or equal to doubleS
document.getElementById("button").onclick = loop;
var inputB = document.getElementById("inputB");
var inputC = document.getElementById("inputC");
var result = document.getElementById("result")
function loop() {
var s = inputB.value;
var r = inputC.value;
var doubleS = s * 2;
while(true) {
s = ((r / 100 + 1) * s);
result.innerHTML += s + "<br>";
if(s >= doubleS){
break
}
}
}
<! DOCTYPE html>
<html>
<body>
<br>
<input type="text" id="inputB" value="10"><br>
<input type="text" id="inputC" value="4"><br><br>
<button id="button">Klik</button>
<p> De ingevoerde resultaten: </p>
<p id="result"></p>
<script async src="oefin1.js"></script>
</body>
</html>
function draw() {
var nums = document.getElementById("number").value.split(",");
console.log(nums);
var w = 40;
var factor = 20;
var n_max = Math.max.apply(parseInt, nums);
var h_max = factor * n_max;
console.log("h max is " + h_max);
console.log("n max is " + n_max);
//var h_max = Math.max(h);
//var a = parseInt(nums);
//var create = document.getElementById("shape");
for (var i = 0; i <= nums.length; i++) {
//var x = parseInt(nums[i]);
//var final_width = w / x;
var x_cor = (i + 1) * w;
//var y_cor = i * w * 0.5;
var h = factor * nums[i];
console.log(x_cor);
console.log(h);
//console.log(h_max);
var change = document.getElementById("histContainer");
//change.className = 'myClass';
var bar = document.createElement("div");
bar.className = 'myClass';
//var c_change = document.createElement("div2");
//change.appendChild(c_change);
change.appendChild(bar);
console.log(change);
//change.style.x.value = x_cor;
//change.style.y.value = y_cor;
bar.style.position = "absolute";
bar.style.top = (h_max - h) + "px";
//bar.style.transform = "rotate(-1deg)"
bar.style.left = i * w * 1 + "px";
bar.style.backgroundColor = "rgb(1,211,97)";
bar.style.opacity = "0.6";
bar.style.width = w + "px";
bar.style.height = h + "px";
//var color1 = document.getElementById("histContainer");
//var bar_color = document.createElement("div");
//color1.appendChild(change);
//bar.style.color = "rgba(1,211,97,0.6)";
}
}
function color() {
//draw();
var change1 = document.getElementsByClassName('myClass');
for (var i = 0; i < change1.length; i++) {
change1[i].style.backgroundColor = "rgb(255,0,27)";
console.log("Change1 = " + change1[i]);
}
// var bar1 = document.createElement("div2");
// change1.appendChild(bar1);
// console.log(change1);
//change1.style.backgroundColor = "rgb(1,,254,16)";
}
$(document).ready(function() {
$(document).on("mouseover", ".myClass", function() {
//var number = this.nums;
//$(this.nums).text($(this.nums).index());
//$(".myClass").append(nums);
var shade = $(this).css("opacity");
$(this).css("opacity", "1.0");
$(document).on("mouseout", ".myClass", function() {
$(this).css("opacity", shade);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Number:<input type="text" id="number" /><br>
<input type="button" id="button1" value="Draw" onClick="draw()" /><br>
<input type="button" id="button2" value="Change Color" onClick="color()" /><br>
<div id="histContainer" style="position: relative;"> </div>
<!-- <label for="mouseover" id="label1">Bar Value</label><br>
<input type="text" name="mouseover" id="text2" value="0"/><br> -->
<!-- <input type="button" id="color_change" style="float: right;" value="Change Color" /> -->
My Question is- I have entered some numbers as Input, and corresponding histogram is made according to the input values. Now, I have created mouseover() on each bar, and WANT to display their proportionate sizes, as given in input.
Can you provide me some help? Only thing which i figured out was- I have to call my draw function in the jQuery mouseover.
REFER TO the draw() and jQuery function(last)
I have figured out the answer. It is required that the nums array has to be re-declared again.
Solution Achieved
$(document).ready(function() {
$(document).on("mouseover",".myClass", function(){
//var numbers = $("#number").serialize();
//var number = this.nums;
var nums = document.getElementById("number").value.split(",");
$(this).text(nums[$(this).index()]);
//$(".myClass").append(nums);
var shade = $(this).css("opacity");
$(this).css("opacity", "1.0");
$(document).on("mouseout",".myClass", function() {
$(this).css("opacity", shade);
});
});
});
I have the conversion math correct(looked it up here), but getting the value from the element that displays the height in cm, then parse it to ft/inch and display it on(on click) the right hand span does not work, i get a reference error(converter not defined).
I cannot figure out why it is undefined, is it because of hoisting or can the parseInt function not have the parameters as they are?
Here is the function
var displayInches = document.getElementById("heightInches");
displayInches.addEventListener("click", function() {
toFeet(converter);
});
function toFeet(converter) {
var heightOutputCM = document.getElementById("yourHeight");
var converter = parseInt(heightOutputCM.value);
var realFeet = converter * 0.3937 / 12;
var feet = Math.floor(realFeet);
var inches = Math.round((realFeet - feet) * 12);
return feet + "and" + inches;
}
Here is the link:
https://codepen.io/damianocel/pen/ZyRogX
HTML
<h1>Alcohol blood level calculator</h1>
<fieldset>
<legend>Your Indicators</legend><br>
<label for="height" class="margin">Height:</label>
<span class="leftlabel" id=""><span id="yourHeight"></span>Cm</span>
<input type="range" id="UserInputHeight" name="height" min="0" max="200" step="1" style="width: 200px">
<span id="heightInchesSpan" class="rightlabel"><span id="heightInches"></span>Ft</span>
<br>
<label for="" class="margin">Gender:</label>
<span class="leftlabel">Male</span>
<input type="range" id="salary" name="salary" min="0" max="1" style="width: 200px">
<span class="rightlabel">Female</span>
</fieldset>
JS
// get and display height
var displayHeightInput = document.getElementById("UserInputHeight");
displayHeightInput.addEventListener("input", function() {
sliderChange(this.value);
});
function sliderChange(val) {
var heightOutput = document.getElementById("yourHeight");
heightOutput.innerHTML = val;
toFeet();
return val;
}
function toFeet() {
var heightOutputCM = document.getElementById("yourHeight");
var converter = parseInt(heightOutputCM.innerHTML);
var realFeet = converter * 0.3937 / 12;
var feet = Math.floor(realFeet);
var inches = Math.round((realFeet - feet) * 12);
document.getElementById("heightInches").innerHTML=feet + "and" + inches;
return feet + " and " + inches;
}
EDIT2: I removed the input validations, so now values don't get corrupted.
Added more functions to onkeyup method. However, if for eg, I enter three values, for Widht, GSM and Weight, Length will be calculated but since all functions are in on key up, along with length, other values change as well.
How do I make it so that when Length is being calculated, other values don't alter?
EDIT: For eg, if value for Length, Width and GSM is provided, then value for Weight will be assigned { formula: Length * Width * GSM/3100 }
if value for Width, GSM and Weight are given, then Length should be calculated { formula: (Weight * 3100) / width * GSM }
and so on.
I have four input boxes, What I want is when the user puts in any of the three boxes the fourth value should generate automatically in the fourth box.
Right now my code works when there is a fixed box in which we have to get the fourth value
New HTML:
<!DOCTYPE html>
<html>
<head>
<title>Paper Calc 2</title>
<script type="text/javascript" src = "js/test.js"></script>
<link rel="stylesheet" type="text/css" href="css/CALC.css">
<meta charset="utf-8">
</head>
<body>
<div class="container-fluid">
<div id = "case_one" class="calcoptions sizemod">
<h5>1. To find the weight (in <b>Kilograms</b>) of a ream containing 500 sheets of a given size in <b>inches</b> and <b>Gram-Weight.</b></h5>
<br>
<div class="row">
<div class="col-md-6">
Length: <input type="number" step="0.01" name="length_in" id="length" placeholder="Length(inch)" onkeyup="fun(); fun2(); fun3();">inch
<br><br>
Width: <input type="number" step="0.01" name="width_in" id="width" placeholder="Width(inch)" onkeyup="fun(); fun2(); fun4();">inch
<br><br>
GSM: <span class="extraSpace"> </span><input type="number" step="0.01" name="length_in" id="GSM" placeholder="GSM" onkeyup="fun(); fun3(); fun4();"> <!-- <button type = "button" name = "calc2" class = 'btnclass' id="cal2" onclick="func2()"> calc2-->
</button>
<br><br>
Weight: <input type="number" step = "0.01" name="Weight_Kg" id = "weight" onkeyup="fun2(); fun3(); fun4();"> <!-- KG <button type = "button" name = "calc1" id="cal1" class = 'btnclass' onclick="func1()">
calc1 -->
</button>
<br><br>
</div>
<p id='err'></p>
</body>
</html>
New JS:
function fun()
{
var l = document.getElementById('length').value;
var w = document.getElementById('width').value;
var g = document.getElementById('GSM').value;
if (l && w && g)
{
var wt = document.getElementById('weight');
var calculate = (eval(l)*eval(w)*eval(g))/3100;
wt.value = calculate.toFixed(2);
}
};
function fun2()
{
var l = document.getElementById('length').value;
var w = document.getElementById('width').value;
var wt = document.getElementById('weight').value;
if (l && w && wt)
{
var g = document.getElementById('GSM');
var calculate = (eval(wt)*3100)/(eval(l)*eval(w));
g.value = calculate.toFixed(2);
}
};
function fun3()
{
var l = document.getElementById('length').value;
var wt = document.getElementById('weight').value;
var g = document.getElementById('GSM').value;
if (l && g && wt)
{
var w = document.getElementById('width');
var calculate = (eval(wt)*3100)/(eval(l)*eval(g));
w.value = calculate.toFixed(2);
}
};
function fun4()
{
var w = document.getElementById('width').value;
var wt = document.getElementById('weight').value;
var g = document.getElementById('GSM').value;
if (w && g && wt)
{
var l = document.getElementById('length');
var calculate = (eval(wt)*3100)/(eval(w)*eval(g));
l.value = calculate.toFixed(2);
}
};
function calculateWeightInInches() {
var Length = document.getElementById("txt_weight").value;
var width = document.getElementById("txt_width").value;
var GSM = document.getElementById("txt_GSM").value;
var calculate = (Length * width * GSM) / 3100;
var result = document.getElementById("txt_Result");
// if (Length < 0)
// {
// document.getElementById('err').innerHTML = 'Incorrect Length!';
// }
error = document.getElementById('err_1');
if (calculate < 0 || width > 300 || width < 1 || GSM < 5 || GSM > 800 || Length < 1 || Length > 99) {
result.value = 0;
error.style.display = 'block';
} else {
result.value = calculate.toFixed(2);
error.style.display = 'none';
}
}
<div class="container-fluid">
<div id="case_one" class="calcoptions sizemod">
<h5>1. To find the weight (in <b>Kilograms</b>) of a ream containing 500 sheets of a given size in <b>inches</b> and <b>Gram-Weight.</b></h5>
<br>
<div class="row">
<div class="col-md-6">
Length: <input type="number" step="0.01" name="length_in" id="txt_weight" placeholder="Length(inch)" min="1" max="99" onkeyup="calculateWeightInInches();">inch
<br><br> Width: <input type="number" step="0.01" name="width_in" id="txt_width" placeholder="Width(inch)" min="1" max='300' onkeyup="calculateWeightInInches();">inch
<br><br> GSM: <span class="extraSpace"> </span><input type="number" min="5" max="800" step="0.01" name="length_in" id="txt_GSM" placeholder="GSM" onkeyup="calculateWeightInInches();">
<br><br> Weight: <input type="number" step="0.01" name="Weight_Kg" id="txt_Result" readonly="readonly">KG
<br><br>
</div>
<div class="col-md-6">
<p id="err_1" style="display: none;">
Valid Range: <br> L = 1 to 99 inch <br> W = 1 to 99 inch <br> GSM = 5 to 800 <br><br> Formula: (Length * width * GSM) / 3100
</p>
</div>
</div>
</div>
<div id="case_two" class="calcoptions sizemod">
I am trying by putting another function in onkeyup but it ruins the code.
[because values keep changing]
Any help would be appreciated!
function calculateWeightInInches() {
var Length = document.getElementById("txt_weight").value;
var width = document.getElementById("txt_width").value;
var GSM = document.getElementById("txt_GSM").value;
var calculate = (Length * width * GSM) / 3100;
var result = document.getElementById("txt_Result");
// if (Length < 0)
// {
// document.getElementById('err').innerHTML = 'Incorrect Length!';
// }
error = document.getElementById('err_1');
if(calculate < 0 || width > 300 || width < 1 || GSM < 5 || GSM > 800 || Length < 1 || Length > 99)
{
result.value = 0;
error.style.display = 'block';
}
else
{
if(Length && width && GSM) {
var GSMElement = document.getElementById("txt_GSM");
var lengthElement = document.getElementById("txt_weight");
var widthElement = document.getElementById("txt_width");
var elementsArray = [GSMElement,widthElement,lengthElement]
elementsArray.forEach(function(ele){
ele.addEventListener('change', function() {
result.value = calculate.toFixed(2);
error.style.display = 'none';
})
})
}
}
}
Hey guys im trying to create a function that takes 3 arguments. The first argument is supposed to be "MULTIPLY" or "DIVIDE" in an input field, then followed by two numbers which are also in separate input fields, that should be either multipled or divided according based on the first argument. I cant figure out exactly how i'm supposed to write this down in code.
this is my code so far;
<!DOCTYPE html>
<html>
<head>
<script src="ovning3-3.js"></script>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1></h1>
<p>
</p>
<input id="first" type="text">
<input id="second" type="text">
<input id="third" type="text">
<input type="button" value="Multiply" onclick="multiply()">
<input type="button" value="Divide" onclick="divide()">
<input type="button" value="Multiply and Divide" onclick="multiplyAndDivide()">
</body>
</html>
and the java script;
function multiply() {
var x = document.getElementById("first").value;
var y = document.getElementById("second").value;
var z = document.getElementById("third").value;
var result = (x * y) * z
alert(result)
}
function divide() {
var x = document.getElementById("first").value;
var y = document.getElementById("second").value;
var z = document.getElementById("third").value;
var result = (x / y) / z
alert(result)
}
function multiplyAndDivide() {
multiply();
divide();
}
Any help out there?
You can use only one function
function multiplyOrDivide(todo){
var x = document.getElementById("first").value;
var y = document.getElementById("second").value;
var z = document.getElementById("third").value;
if(todo==0){
alert(Number(x*y*z));
}
else{
if(y!=0 || z!=0){
alert(Number(x/y)/z);
}
}
}
In onclick you can pass options as multiplyOrDivide(1)
See if this is what you want
<!DOCTYPE html>
<html>
<head>
<script>
function calculate() {
var x = document.getElementById("first").value;
var y = document.getElementById("second").value;
var d = document.getElementById("decision").value;
if (d=="*")
result = x*y;
else if(d=="/")
result = x/y;
alert(result)}
</script>
<title></title>
</head>
<body>
<h1></h1>
<select id="decision">
<option value="*">Multiply</option>
<option value="/">Divide</option>
</select><br>
<input id="first" type="text">
<input id="second" type="text"><br>
<input type="button" value="Calculate" onclick="calculate()">
</body>
</html>
Let me know if you need any further explaination
You can use select menu to choice which operation you want to perform. To use js functionality, you can take a look this:
function calculate() {
var selected_operation = document.getElementById("operation");
var operation = selected_operation.options[selected_operation.selectedIndex].value;
if (operation == 'multiply')
multiply(operation);
else if (operation == 'divide')
divide();
else if (operation == 'mulitiply_division')
multiplyAndDivide();
}
function multiply() {
var x = document.getElementById("first").value;
var y = document.getElementById("second").value;
var z = document.getElementById("third").value;
var result = (x * y) * z
alert(result);
}
function divide() {
var x = document.getElementById("first").value;
var y = document.getElementById("second").value;
var z = document.getElementById("third").value;
var result = (x / y) / z
alert(result);
}
function multiplyAndDivide() {
multiply();
divide();
}
To see the whole scenario, please visit DEMO
function mul()
{
var a = document.getElementById("v1").value;
var b = document.getElementById("v2").value;
document.getElementById("ans").innerHTML = "Multiplication is: " + a * b;
}
function div()
{
var a = document.getElementById("v1").value;
var b = document.getElementById("v2").value;
document.getElementById("ans").innerHTML = "Division is: " + a / b;
}
<!DOCTYPE html>
<html>
<head>
</head>
<style>
body{
padding-left: 80px;
}
</style>
<body>
<p id="ans"></p>
<input type="text" placeholder="Value 1" id="v1"><br><br>
<input type="text" placeholder="Value 2" id="v2"><br><br>
<input type="button" onclick="mul()" id="mul" value="Multiplication">
<input type="button" id="div" onclick="div()" value="Division">
</body>
</html>
Explanation:
document.getElementById(id).value: The value property sets or returns the value of the value attribute of a text field.
document.getElementById("result").innerHTM : The innerHTML property sets or returns the HTML content (inner HTML) of an element.