My javascript code does work for buttons called \"calculate\" \"clear\" and \"fa
ID: 3881230 • Letter: M
Question
My javascript code does work for buttons called "calculate" "clear" and "fade results"
My code is:
<!DOCTYPE html>
<!-- Homework assignment for CNIT 133, Kyung Bae Kim, 01/31/2018 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Creating CNIT 133 homepage">
<title>CNIT 133 Homework Page</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
</style>
<body>
<div class="w3-top">
<div class="w3-bar w3-white w3-wide w3-padding w3-card">
<a href="./index.html" class="w3-bar-item w3-button"><b>CNIT 133</b> Kyung Bae Kim</a>
<div class="w3-right w3-hide-small">
<a href="./index.html" class="w3-bar-item w3-button">HW1</a>
<a href="./hw2.html" class="w3-bar-item w3-button">HW2</a>
<a href="./hw3.html" class="w3-bar-item w3-button">HW3</a>
<a href="./hw4.html" class="w3-bar-item w3-button">HW4</a>
<a href="./hw5.html" class="w3-bar-item w3-button">HW5</a>
<a href="./hw6.html" class="w3-bar-item w3-button">HW6</a>
<a href="./hw7.html" class="w3-bar-item w3-button">HW7</a>
<a href="./hw8.html" class="w3-bar-item w3-button">HW8</a>
</div>
</div>
</div>
<header class="w3-display-container w3-content w3-wide" id="home">
<img class="w3-image" src="images/wall2.png" alt="CodingIllustration" width="1500">
<div class="w3-display-middle w3-margin-top w3-center">
</div>
</header>
<div class="w3-container w3-padding-32">
<h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">HW2 - Part 3: Input and Count Numbers</h3>
<p>Create a webpage that contains a script that inputs 5 numbers and determines and displays the count of the negative numbers, the number of positive numbers, and the number of zeros. For input, use form text boxes. Your results should be displayed using a form textarea or a div element. Define a 'Click to Fade Results' button on the form. Use jQuery to define a ready handler that defines a click event handler for the button, such that clicking the button fades the results in the textarea.</p>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#fade').click(function(){
$(':input[name=calculations]').fadeTo("slow", 0.1);
});
});
// declare and use of array
var num;
var int;
var id = new Array("int1", "int2", "int3", "int4", "int5");
var intPositive = 0;
var intNegative = 0;
var intZero = 0;
function calculator() {
// a block of code designed to perform calculation
// find positives, negatives and zeroes by using loop
for (var i=0; i<5; i++) {
number = parseInt(document.getElementById(id[i]).value);
if (num > 0){
intPositiv e++;
}else if (num == 0){
intZero ++;
}else {
intNegative ++;
}
};
//Display the results
document.getElementById("result").value = ("Positive numbers: " + intPositive +
" Negative numbers: " + intNegative +
" Zeroes: " + intZero);
}
function resetAll(){
// a block of code designed to clear the form
document.frm.reset();
}
</script>
<form name=frm>
First integer: <input type="text" name="int1"><br>
Second integer: <input type="text" name="int2"><br>
Third integer: <input type="text" name="int3"><br>
Fourth integer: <input type="text" name="int4"><br>
Fifth integer: <input type="text" name="int5"><br>
Results: <textarea name="results" rows="3" cols="23"></textarea><br>
<input type="button" value="Calculate">
<input type="button" value="Clear">
<input type="button" id="fade" value="Fade Results">
</form>
</div>
<footer class="w3-center w3-black w3-padding-16">
<p>© 2018 <a href="mailto:kkim76@mail.ccsf.edu?Subject=Sent%20from%20CNIT133-JavaScript">Kyung Bae Kim</a>
</footer>
</body>
</html>
Explanation / Answer
There were some issues in your code: -
1. Head tag was not closed
2. You were using document.getelementById whereas, you have specified input as name not id.
3. some restructuring was needed in your code.
4. In fade function, you were not using proper selector name. you were using calculations whereas it must be results.
5. to display the result you were using name as result whereas it should be results.
I have corrected the code and it is working fine now. Please check below for the wporking code
<!DOCTYPE html>
<!-- Homework assignment for CNIT 133, Kyung Bae Kim, 01/31/2018 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Creating CNIT 133 homepage">
<title>CNIT 133 Homework Page</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#fade').click(function(){
$(':input[name=results]').fadeTo("slow", 0.1);
});
});
// declare and use of array
var num;
var int;
var id = new Array("int1", "int2", "int3", "int4", "int5");
var intPositive = 0;
var intNegative = 0;
var intZero = 0;
function calculator() {
// a block of code designed to perform calculation
// find positives, negatives and zeroes by using loop
for (var i=0; i<5; i++) {
num = parseInt(document.getElementsByName(id[i])[0].value);
if (num > 0){
intPositive++;
}else if (num == 0){
intZero ++;
}else {
intNegative ++;
}
};
//Display the results
document.getElementsByName("results")[0].value = ("Positive numbers: " + intPositive +
" Negative numbers: " + intNegative +
" Zeroes: " + intZero);
}
function resetAll(){
// a block of code designed to clear the form
document.frm.reset();
}
</script>
<style>
</style>
</head>
<body>
<div class="w3-top">
<div class="w3-bar w3-white w3-wide w3-padding w3-card">
<a href="./index.html" class="w3-bar-item w3-button"><b>CNIT 133</b> Kyung Bae Kim</a>
<div class="w3-right w3-hide-small">
<a href="./index.html" class="w3-bar-item w3-button">HW1</a>
<a href="./hw2.html" class="w3-bar-item w3-button">HW2</a>
<a href="./hw3.html" class="w3-bar-item w3-button">HW3</a>
<a href="./hw4.html" class="w3-bar-item w3-button">HW4</a>
<a href="./hw5.html" class="w3-bar-item w3-button">HW5</a>
<a href="./hw6.html" class="w3-bar-item w3-button">HW6</a>
<a href="./hw7.html" class="w3-bar-item w3-button">HW7</a>
<a href="./hw8.html" class="w3-bar-item w3-button">HW8</a>
</div>
</div>
</div>
<header class="w3-display-container w3-content w3-wide" id="home">
<img class="w3-image" src="images/wall2.png" alt="CodingIllustration" width="1500">
<div class="w3-display-middle w3-margin-top w3-center">
</div>
</header>
<div class="w3-container w3-padding-32">
<h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">HW2 - Part 3: Input and Count Numbers</h3>
<p>Create a webpage that contains a script that inputs 5 numbers and determines and displays the count of the negative numbers, the number of positive numbers, and the number of zeros. For input, use form text boxes. Your results should be displayed using a form textarea or a div element. Define a 'Click to Fade Results' button on the form. Use jQuery to define a ready handler that defines a click event handler for the button, such that clicking the button fades the results in the textarea.</p>
<form name=frm>
First integer: <input type="text" name="int1"><br>
Second integer: <input type="text" name="int2"><br>
Third integer: <input type="text" name="int3"><br>
Fourth integer: <input type="text" name="int4"><br>
Fifth integer: <input type="text" name="int5"><br>
Results: <textarea name="results" rows="3" cols="23"></textarea><br>
<input type="button" value="Calculate">
<input type="button" value="Clear">
<input type="button" id="fade" value="Fade Results">
</form>
</div>
<footer class="w3-center w3-black w3-padding-16">
<p>© 2018 <a href="mailto:kkim76@mail.ccsf.edu?Subject=Sent%20from%20CNIT133-JavaScript">Kyung Bae Kim</a>
</footer>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.