javascript.zip (3.3 KB)
Hi I was using inline JavaScript in my Html and internal css.
I made external files for the javascript and the css. My Css is loading beautifuly but my javascript is not. attached is my 3 files.
<script src="assignment-jasmine.js"></script> is the code I’m using to call my javascript file. Is this correct and where do I place it on my page?
This is my HTML
<!Doctype html>
<html>
<head>
<link rel="stylesheet" href="assignment-Jasmine.css">
<title>JavaScript Assignments- Jasmine Lusty</title>
</head>
<body>
<h2>JavaScript Assignment 5 - Jasmine Lusty</h2>
<!-- Grade Html -->
<h4>Grades!</h4>
<p>Select your age from the list.</p>
<select id="mySelect" onchange="age()">
<option value="Grade">Age</option>
<option value="Grade 1">6</option>
<option value="Grade 2">7</option>
<option value="Grade 3">8</option>
<option value="Grade 4">9</option>
<option value="Grade 5">10</option>
<option value="Grade 6">11</option>
</select>
<p id="selectedGrade"></p>
<br>
<!-- Math Html -->
<h4>Math!</h4>
<p>Try to see if you can do the math</p>
<table id="addition-table">
<tbody>
<tr class="Calculation">
<td>5</td>
<td>3</td>
<td><input type="text"></td>
</tr>
<tr class="Calculation">
<td>7</td>
<td>6</td>
<td><input type="text"></td>
</tr>
<tr class="Calculation">
<td>5</td>
<td>5</td>
<td><input type="text"></td>
</tr>
<tr class="Calculation">
<td>8</td>
<td>3</td>
<td><input type="text"></td>
</tr>
<tr class="Calculation">
<td>4</td>
<td>7</td>
<td><input type="text"></td>
</tr>
<tr class="Calculation">
<td>3</td>
<td>9</td>
<td><input type="text"></td>
</tr>
<tr class="Calculation">
<td>8</td>
<td>5</td>
<td><input type="text"></td>
</tr>
<tr class="Calculation">
<td>2</td>
<td>6</td>
<td><input type="text"></td>
</tr>
<tr class="Calculation">
<td>5</td>
<td>9</td>
<td><input type="text"></td>
</tr>
<tr class="Calculation">
<td>6</td>
<td>6</td>
<td><input type="text"></td>
</tr>
</tbody>
</table>
<br>
<!---- Email Html--->
<h4>Email Validation!</h4>
<p>Type in Your Email</p>
<input type="email" id="email">
<br>
<br>
<script src="assignment-jasmine.js"></script>
</body>
</html>
This is my JavaScript
//Age/Grade Code
function age() {
var x = document.getElementById("mySelect").value;
document.getElementById("selectedGrade").innerHTML = "You selected: " + x;
}
//Math Code
(function( math ) {
'use strict';
var tr = math.querySelectorAll( 'tr' ),
td = math.querySelectorAll( 'td' ),
inp = math.querySelectorAll( 'input' ),
totals = [], c;
for ( c = 0; c < tr.length; c ++ ) {
totals.push( parseFloat( td[ c * 3 ].textContent ) +
parseFloat( td[ c * 3 + 1 ].textContent ) );
inp[ c ].value = ' ';
inp[ c ].addEventListener( 'blur', check_answer( c ), false );
}
function check_answer( c ) {
inp[ c ].onblur = function() {
if( inp[ c ].value == totals[ c ] ) {
tr[ c ].classList.add( 'right' );
}
else {
tr[ c ].classList.remove( 'right' );
tr[ c ].classList.add( 'wrong' );
}
}
}
}( document ) );
//Email Code
function validateEmail(email, emailPattern){
emailPattern = (emailPattern instanceof RegExp) ? emailPattern : /[\w-\.]+@([\w-]+\.)+[\w-]{2,4}/;
return matchResults;
}
var email = document.getElementById('email')
email.addEventListener('blur', function (event) {
event.target.style.backgroundColor = event.target.validity.valid
? 'transparent'
: 'red'
})
//remove code
window.removeEventListener("beforeunload", "mySelect", false);
window.removeEventListener("beforeunload", check_answer( c ), false );
window.removeEventListener("beforeunload", function (event)
And this is my css code
@charset "UTF-8";
/* CSS Document */
td{
padding-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
padding-left: 20px;
}
.wrong {
background-color: #fa8072;
}
.right {
background-color: transparent;
}
Thank you
