I am developing web-project using servlets and jsp. I am building the project in intellij. In the project I have one jsp that manage graphics and user form. graphics.js is responsible for the graphics and for form validation - validator.js.
My problem: Tomcat works correctly with graphics.js but he can't find the validator.js. In the console, I have a 404 message that says there is no validator.js, although it is in the same folder as the graphics.js.
I would be very grateful for an explanation of this situation. I found similar questions, but the answers to them did not help me. I apologize if I repeat one of them
The project structure:
src
ControllerServlet.java
AreaCheckingServlet.java
web
css
style.css
js
graphics.js
validator.js
WEB-INF
Form.jsp
web.xml
Form.jsp:
<%# page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="UTF-8">
<style><%#include file="/css/style.css"%></style>
<title>web-lab-2</title>
<script src="${pageContext.request.contextPath}/js/graphics.js"></script>
<script src="${pageContext.request.contextPath}/js/validator.js"></script>
</head>
<body>
<div id="canvas" class="one_line">
<canvas id="graphics" height="600px" width="600px"></canvas>
<script>draw(600, 240, 25)</script>
</div>
<div id="input_column" class="one_line">
<form class="js-form">
<div id="x" class="input">
<p>choose the value of x</p>
<input id="x=-4" name="x" type="radio" value="-4">
<label for="x=-4">-4</label><br>
<input id="x=-3" name="x" type="radio" value="-3">
<label for="x=-3">-3</label><br>
<input id="x=-2" name="x" type="radio" value="-2">
<label for="x=-2">-2</label><br>
<input id="x=-1" name="x" type="radio" value="-1">
<label for="x=-1">-1</label><br>
<input id="x=0" name="x" type="radio" value="0">
<label for="x=0">0</label><br>
<input id="x=1" name="x" type="radio" value="1">
<label for="x=1">1</label><br>
<input id="x=2" name="x" type="radio" value="2">
<label for="x=2">2</label><br>
<input id="x=3" name="x" type="radio" value="3">
<label for="x=3">3</label><br>
<input id="x=4" name="x" type="radio" value="4">
<label for="x=4">4</label><br>
</div>
<div id="y" class="input">
<p></p>
<label for="y-inp">choose the value of y</label>
<p></p>
<input id="y-inp" name="y" type="text" placeholder="type a number between -3 and 5" class="y">
</div>
<br>
<div id="r-group" class="input">
<input id="r=1" name="r" type="checkbox" value="1">
<label for="r=1">1</label><br>
<input id="r=2" name="r" type="checkbox" value="2">
<label for="r=2">2</label><br>
<input id="r=3" name="r" type="checkbox" value="3">
<label for="r=3">3</label><br>
<input id="r=4" name="r" type="checkbox" value="4">
<label for="r=4">4</label><br>
<input id="r=5" name="r" type="checkbox" value="5">
<label for="r=5">5</label><br>
</div>
<div>
<label for="submit">Send</label><br>
<input id="submit" type="button" onclick="validate()">
</div>
</form>
</div>
</body>
</html>
graphics.js:
function draw(side, r, mar) {
const canvas = document.getElementById("graphics")
const context = canvas.getContext('2d')
context.fillStyle = (30, 30, 30)
context.globalAlpha = 0.15
context.fillRect(0, 0, side, side)
context.fillStyle = "blue"
context.globalAlpha = 0.65
context.fillRect(side / 2, side / 2, r, -r / 2)
context.beginPath()
context.arc(side / 2, side / 2, r, 0, Math.PI / 2)
context.moveTo(side / 2, side / 2)
context.lineTo(side / 2 + r, side / 2)
context.lineTo(side / 2, side / 2 + r)
context.fill()
context.beginPath()
context.moveTo(side / 2, side / 2)
context.lineTo(side / 2 - r / 2, side / 2)
context.lineTo(side / 2, side / 2 + r)
context.fill()
context.fillStyle = "black"
context.globalAlpha = 1;
context.beginPath();
context.moveTo(0, side / 2);
context.lineTo(side, side / 2);
context.moveTo(side / 2, 0);
context.lineTo(side / 2, side);
context.stroke();
context.font = '20px monospace'
context.fillText('-R', side / 2 - r, side / 2 + mar)
context.fillText('-R/2', side / 2 - r / 2, side / 2 + mar)
context.fillText('0', side / 2 - mar * 0.75, side / 2 + mar)
context.fillText('R/2', side / 2 + r / 2, side / 2 + mar)
context.fillText('R', side / 2 + r, side / 2 + mar)
context.fillText('R', side / 2 - mar * 0.75, side / 2 - r)
context.fillText('R/2', side / 2 - mar * 1.5, side / 2 - r / 2)
context.fillText('-R/2', side / 2 - mar * 2, side / 2 + r / 2)
context.fillText('-R', side / 2 - mar * 1.25, side / 2 + r)
console.log("done")
}
validator.js(there is only a message about the correct work for debugging yet):
function validate() {
console.log("donedone")
}
I tried to change the directory with js-scripts, change URLs in the code to "/js/validator.js", "js/validator.js" and "../js/validator.js" (it is worth noting that the graphics.js was correctly located with all these paths), also I tried to search validator.js directly by "localhost:8080/js/validator.js". This didn't work either, but "localhost:8080/js/graphics.js " works.
UPD: I also tried rebuild/clean artefacts. And recreating the project from 0 too
I still didn't understand what the error was. But it helped me to replace the old lines of code:
<script src="${pageContext.request.contextPath}/js/graphics.js"></script>
<script src="${pageContext.request.contextPath}/js/validator.js"></script>
with these:
<script><%#include file="/js/graphics.js"%></script>
<script><%#include file="/js/validator.js"%></script>
UPD: After some research, I assume that the problem was the lack of Tomcat permission to use files from my project folder.
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I meet a problem like when I try to enter a number like 1,1,0 for a,b,c the x1 should show x1 =0. x2 = -1, but it doesn't work.
<script type="text/javascript">
<!--
function solve()
{
var formObj = document.getElementById("linEq");
var a = formObj.a.value;
var b = formObj.b.value;
var c = formObj.c.value;
var det = 2*a;
formObj.x1.value = (-b + Math.sqrt(Math.pow(b,2) - 4*a*c)/det;
formObj.x2.value = (-b - Math.sqrt(Math.pow(b,2) - 4*a*c)/det;
}
// -->
</script>
</head>
<body style="background-color: #add8e6;">
<h2>Linear System Solver</h2>
<p>Input the coefficients into the linear system:</p>
<form id="linEq" action="#">
<table>
<tr><td><input type="text" size="4" name="a" /><b>x^2</b></td> <td>+</td>
<td><input type="text" size="4" name="b" /><b>x</b></td> <td>+</td>
<td><input type="text" size="4" name="c" /></td> <td>=</td>
<td><b>0</b></td></tr>
</table>
<p><input type="button" value="Solve it" onclick="solve()" />
<input type="reset" value="Reset" /> </p>
<p>Solution: <b>x1</b> =
<input type="text" size="10" name="x1" />
<b>x2</b> =
<input type="text" size="10" name="x2" />
</p>
</form>
I don't know where the mistake is, it just doesn't work.
You forgot to add a paranthesis at the end of the lines with formObj.x1.value and formObj.x2.value. Also consider including validation of input parameters. As negative coeficients in the SQRT will return NAN answers for x1 and x2.
<html>
<head>
<script>
function solve() {
var formObj = document.getElementById("linEq");
var a = Number(formObj.a.value);
var b = Number(formObj.b.value);
var c = Number(formObj.c.value);
var det = 2 * a;
formObj.x1.value = (-1 * b + Math.sqrt(Math.pow(b, 2) - (4 * a * c))) / det;
formObj.x2.value = (-1 * b - Math.sqrt(Math.pow(b, 2) - (4 * a * c))) / det;
}
</script>
</head>
<body style="background-color: #add8e6;">
<h2>Linear System Solver</h2>
<p>Input the coefficients into the linear system:</p>
<form id="linEq" action="#">
<table>
<tr>
<td><input type="text" size="4" name="a" /><b>x^2</b></td>
<td>+</td>
<td><input type="text" size="4" name="b" /><b>x</b></td>
<td>+</td>
<td><input type="text" size="4" name="c" /></td>
<td>=</td>
<td><b>0</b></td>
</tr>
</table>
<p><input type="button" value="Solve it" onclick="solve()" />
<input type="reset" value="Reset" /> </p>
<p>Solution: <b>x1</b> =
<input type="text" size="10" name="x1" />
<b>x2</b> =
<input type="text" size="10" name="x2" />
</p>
</form>
</body>
</html>
[enter image description here][1]
[1]: https://i.stack.imgur.com/ztI16.png the variable ns in the image is making problem and not giving the result needed plz suggest the proper way of writting it .
The code image you posted has some problems:
y is not checked for being a number (the input allows strings!)
I don't see code processing the input (like the input with ID a)
So, it seems that your code logic works, but some small things need fixing.
const salaryInput = document.getElementById("a")
salaryInput.addEventListener('input', function(e) {
var x, y;
x = document.getElementById("n").value;
// checking whether y is a number - if not, treat it as 0
y = isNaN(document.getElementById("a").value) ? 0 : Number(document.getElementById("a").value);
var TA = 0.20 * y;
var DA = 0.15 * y;
var HRA = 0.50 * y;
var PF = 0.20 * y;
var NS = y + TA + DA + HRA + PF
// rounding values with toFixed()
document.getElementById("T").value = TA.toFixed(2)
document.getElementById("D").value = DA.toFixed(2)
document.getElementById("H").value = HRA.toFixed(2)
document.getElementById("P").value = PF.toFixed(2)
document.getElementById("NE").value = NS.toFixed(2)
})
<label for="n">NAME: <input id="n" type="text"></label><br />
<label for="a">BASIC SALARY: <input id="a" type="text"></label><br /><br />
<label for="T">TA: <input id="T" type="text" readonly></label><br />
<label for="D">DA: <input id="D" type="text" readonly></label><br />
<label for="H">HRA: <input id="H" type="text" readonly></label><br />
<label for="P">PF: <input id="P" type="text" readonly></label><br />
<label for="NE">NS: <input id="NE" type="text" readonly></label>
Please note that the snippet above is on no way a "good code" - I just formatted it to use elements you might find similar to your code. Please note that I used <label> instead of <span> to wrap input fields.
This is a portion of my code. Math and everything is working correctly. My issue is when the 'to submit' button is clicked. It runs through this code, all of the variables and inputs are saved correctly. My issue is that my outputs, 'Payment" and "pi" display on the website for a frame before the page are reloaded. Is there a way to make the output stay as well as the inputs the user puts into the fields?
<div id="div7" class="square">
<h1 padding-top="20px">Loan Information</h1>
<form>
<div class="col-25">Years</div><div class="col-75"><input type="number" id="years" min="0"></div><br>
<div class="col-25">Interest</div><div class="col-75"><input type="number" id="rate" min="0"></div><br>
<div class="col-25">Loan Amount</div><div class="col-75"><input type="number" id="amount" min="0"></div><br>
<button onclick="myFunction()">Calculate</button>
<input type="reset" value="Reset">
<h1 padding-top="25px">Loan Details</h1><br>
<div class="col-25">Monthly Payment</div><div class="col-75">:<output id="payment"></output></div><br>
<div class="col-25">P/I</div><div class="col-75">:<output id="pi"</output></div><br>
</form>
</div>
<script>
function myFunction(){
amt=eval(document.getElementById("amount").value);
yrs=eval(document.getElementById("years").value)*12;
rte=eval(document.getElementById("rate").value)/1200;
pmt=(rte+(rte/(Math.pow((1+rte),(yrs))-1)))*amt;
pmt=pmt*100;
mpt=Math.round(pmt);
pmt = pmt/100;
pi = (pmt*yrs)*100;
pi = Math.round(pi);
pi=pi/100;
document.getElementById("payment").innerHTML = payment ;
document.getElementById("pi").innerHTML = pi;
}
</script>
change your:
<button onclick="myFunction()">Calculate</button>
to:
<button onclick="return myFunction()">Calculate</button>
also, note that you are not defining any variables, it will make your code unmaintainable in the future, everything that you are creating is global.
here you have a working example, please note that I had to define the payment value because it was not defined.
function myFunction(e) {
//payment was not define so I'll just leave a 100 :)
payment = 100;
amt = eval(document.getElementById("amount").value);
yrs = eval(document.getElementById("years").value) * 12;
rte = eval(document.getElementById("rate").value) / 1200;
pmt = (rte + (rte / (Math.pow((1 + rte), (yrs)) - 1))) * amt;
pmt = pmt * 100;
mpt = Math.round(pmt);
pmt = pmt / 100;
pi = (pmt * yrs) * 100;
pi = Math.round(pi);
pi = pi / 100;
console.log(payment)
document.getElementById("payment").innerHTML = payment;
document.getElementById("pi").innerHTML = pi;
return false;
}
<div id="div7" class="square">
<h1 padding-top="20px">Loan Information</h1>
<form>
<div class="col-25">Years</div>
<div class="col-75"><input type="number" id="years" min="0"></div><br>
<div class="col-25">Interest</div>
<div class="col-75"><input type="number" id="rate" min="0"></div><br>
<div class="col-25">Loan Amount</div>
<div class="col-75"><input type="number" id="amount" min="0"></div><br>
<button onclick="return myFunction()">Calculate</button>
<input type="reset" value="Reset">
<h1 padding-top="25px">Loan Details</h1><br>
<div class="col-25">Monthly Payment</div>
<div class="col-75">:<output id="payment"></output></div><br>
<div class="col-25">P/I</div>
<div class="col-75">:<output id="pi" </output></div><br>
</form>
</div>
This question already has answers here:
Javascript getElementsByName.value not working [duplicate]
(3 answers)
Closed 3 years ago.
I want to make my calculator... in this calculator you input your height, weight and gender after that click on button and my calculator, calculate you BMI.
function cal() {
var h = document.getElementsByName("height").value; //it's get my height
var w = document.getElementsByName("weight").value; //it's get my weight
var r = (w / (h * h)) * 10000; //it's calculate MBI
document.getElementById("calcu").innerHTML = r; //the answer shows under my form
alert(r);
}
<form>
<fieldset>
<legend>محاسبه BMI</legend>//it's calculate BMI قد (cm)<br>//it's height
<input type="number" name="height" placeholder="175" value="175"><br> وزن (kg)<br>//it's weight
<input type="number" name="weight" placeholder="75" value="73"><br> جنسیت
<br>//it's gender
<input type="radio" name="female" value="gender">زن//women
<input type="radio" name="male" value="gender">مرد//man<br><br>
<input type="button" value="محاسبه" onClick="cal()"><br>//calculator button
<p id="calcu"></p>
</fieldset>
</form>
You need to 1: Select only one element each time, and 2: Convert values to a number:
function cal() {
var h = parseInt(document.getElementsByName("height")[0].value);
var w = parseInt(document.getElementsByName("weight")[0].value);
var r = (w / (h * h)) * 10000; //it's calculate MBI
document.getElementById("calcu").innerHTML = r; //the answer shows under my form
alert(r);
}
<form>
<fieldset>
<legend>محاسبه BMI</legend>//it's calculate BMI قد (cm)<br>//it's height
<input type="number" name="height" placeholder="175" value="175"><br> وزن (kg)<br>//it's weight
<input type="number" name="weight" placeholder="75" value="73"><br> جنسیت
<br>//it's gender
<input type="radio" name="female" value="gender">زن//women
<input type="radio" name="male" value="gender">مرد//man<br><br>
<input type="button" value="محاسبه" onClick="cal()"><br>//calculator button
<p id="calcu"></p>
</fieldset>
</form>
document.getElementsByName returns a collection of elements and .value is undefined for that. You should access the first element of that using
document.getElementsByName("...")[0].value
And also convert it number using +
function cal(){
var h= +document.getElementsByName("height")[0].value;//it's get my height
var w= +document.getElementsByName("weight")[0].value;//it's get my weight
var r= (w/(h*h))*10000;//it's calculate MBI
document.getElementById("calcu").innerHTML=r;//the answer shows under my form
alert(r);
}
<form>
<fieldset>
<legend>محاسبه BMI</legend>//it's calculate BMI
قد (cm)<br>//it's height
<input type="number" name="height" placeholder="175" value="175"><br>
وزن (kg)<br>//it's weight
<input type="number" name="weight" placeholder="75" value="73"><br>
جنسیت<br>//it's gender
<input type="radio" name="female" value="gender">زن//women
<input type="radio" name="male" value="gender">مرد//man<br><br>
<input type="button" value="محاسبه" onClick="cal()"><br>//calculator button
<p id="calcu"></p>
</fieldset>
</form>
function cal(){
var h= document.getElementsByName("height")[0].value;
var w= document.getElementsByName("weight")[0].value;
var r= (w/(h*h))*10000;
document.getElementById("calcu").innerHTML=r;
alert(r);
}
<div class="sectionmenu">
<form>
<fieldset>
<legend>محاسبه BMI</legend>
قد (cm)<br>
<input type="number" name="height" placeholder="175" value="175"><br>
وزن (kg)<br>
<input type="number" name="weight" placeholder="75" value="73"><br>
جنسیت<br>
<input type="radio" name="female" value="gender">زن
<input type="radio" name="male" value="gender">مرد<br><br>
<input type="button" value="محاسبه" onClick="cal()"><br>
<p id="calcu"></p>
</fieldset>
</form>
</div>
I have a loan calculator that I have built using JQuery, HTML, and CSS. It functions ok. The weird thing is I have to refresh the page in order to get it to calculate correctly. I'm not sure what I'm doing (or not doing) correctly. Would love some feedback.
$(document).ready(function() {
// variables
var amount = $('#loanAmount').val();
var yearlyInterestRate = .12;
var monthlyInterestRate = yearlyInterestRate / 12;
var twelveMon = 12;
var eighteenMon = 18;
var twentyFourMon = 24;
var duration = $('input[name=duration]:checked').val();
var calcButton = $('.calculate');
var resetButton = $('.reset');
var monthPay;
$('.results').addClass('hidden');
// Calculate Monthly Payment
calcButton.click(function(event) {
event.preventDefault();
monthPay = (monthlyInterestRate * amount) / [1 - Math.pow((1 + monthlyInterestRate), -duration)];
$('.durationValue').text(duration);
$('.monthlyPayment').text(Math.round(monthPay));
$('.results').removeClass('hidden');
});
resetButton.click(function() {
$(form).reset();
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<section id="loan-calc">
<form id="calculator">
<input type="text" name="loanAmount" id="loanAmount" placeholder="Loan Amount"><br>
<label>Choose your payment duration:</label><br>
<input type="radio" name="duration" value="12" class="duration"> 12 Months<br>
<input type="radio" name="duration" value="18" class="duration"> 18 Months<br>
<input type="radio" name="duration" value="24" class="duration"> 24 Months <br>
<button class="calculate">Calculate</button>
<!-- <button class="rest">Reset</button>-->
</form>
<p class="results">You chose a duration of <span class="durationValue"></span> months and your monthly payment is $<span class="monthlyPayment"></span> at a 12% yearly interest rate.</p>
</section>
You're setting values on document.ready() - so it's even before any of examples in radio will be clicked. Move getting you values into the .click() function
And it's even more efficient to switch from deprecated .click() method to .on('click', function(){}) just in case you'll expand your form in the future
You need to put the vars inside the function that uses them
PS: In a form an input type="reset" /> will reset the form without needing script
$(document).ready(function() {
$('.results').addClass('hidden');
var yearlyInterestRate = .12;
var monthlyInterestRate = yearlyInterestRate / 12;
var twelveMon = 12;
var eighteenMon = 18;
var twentyFourMon = 24;
// Calculate Monthly Payment
$('.calculate').on("click", function(event) {
event.preventDefault();
var amount = $('#loanAmount').val();
var duration = $('input[name=duration]:checked').val();
var monthPay = (monthlyInterestRate * amount) / [1 - Math.pow((1 + monthlyInterestRate), -duration)];
$('.durationValue').text(duration);
$('.monthlyPayment').text(Math.round(monthPay));
$('.results').removeClass('hidden');
});
$('.reset').on("click", function() {
$(form).reset();
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<section id="loan-calc">
<form id="calculator">
<input type="text" name="loanAmount" id="loanAmount" placeholder="Loan Amount"><br>
<label>Choose your payment duration:</label><br>
<input type="radio" name="duration" value="12" class="duration"> 12 Months<br>
<input type="radio" name="duration" value="18" class="duration"> 18 Months<br>
<input type="radio" name="duration" value="24" class="duration"> 24 Months <br>
<button class="calculate">Calculate</button>
<!-- <button class="rest">Reset</button>-->
</form>
<p class="results">You chose a duration of <span class="durationValue"></span> months and your monthly payment is $<span class="monthlyPayment"></span> at a 12% yearly interest rate.</p>
</section>
you take the values of duration and amount on pageload (document ready). if you update the values by filling them in, the variables won't get updated.
move var amount = $('#loanAmount').val(); and var duration = $('input[name=duration]:checked').val(); into the 'onClick' handler so that the amount and duration get updated once you click.