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>

<head>

<title>CNIT 133 Homework Page</title>

<style>

</style>

<body>

<a href="./index.html" class="w3-bar-item w3-button"><b>CNIT 133</b> Kyung Bae Kim</a>

</div>

</div>

</header>

<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>

$(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>

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>

</form>

</div>

</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>

<head>

<title>CNIT 133 Homework Page</title>

$(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>

<a href="./index.html" class="w3-bar-item w3-button"><b>CNIT 133</b> Kyung Bae Kim</a>

</div>

</div>

</header>

<h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">HW2 - Part 3: Input and Count Numbers</h3>

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>

</form>

</div>

</footer>

</body>

</html>

Navigate

My java program takes in employees and their weekly hours and outputs their tota

My job is to build a constructor with print and mostRecent but I don\'t know how

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

My javascript code does work for buttons called \"calculate\" \"clear\" and \"fa

Question

Explanation / Answer

Related Questions

Navigate