As a beginner in HTML and JS coding, I am working on creating a page that prompts user input for a name and then executes animations using radio buttons. However, after adding functions for radio button changes, my prompt is no longer functioning properly. Any assistance would be greatly appreciated!
Commenting out the code allows the prompt to work fine, but as soon as I add any additional code to my hw4.js file, the prompt stops working. The project also involves AJAX and Cookies, although I've decided to tackle those complexities only after resolving this issue. I have even tried downloading JQuery and referencing it through different online links to no avail.
In HTML:
<head>
<title>Greeting Page </title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" defer></script>
<script src="hw4.js" defer></script>
<meta charset="UTF-8">
</head>
<body>
<h1>A Greeting Page for Important People</h1>
<section id= forms>
<form id = "speedForm" class="forms">
<p id = "speeds">
Speed 0 <input type="radio" name=choice value="0" id= "speed0" checked> Speed 1 <input type="radio" name=choice value="1" id= "1" > Speed 2 <input type="radio" name=choice value="2" id= "2" > Speed 3 <input type="radio" name=choice value="3" id= "3" > Speed 4 <input type="radio" name=choice value="4" id= "4" > Speed 5 <input type="radio" name=choice value="5" id= "5" > Speed 6 <input type="radio" name=choice value="6" id= "6" > Speed 7 <input type="radio" name=choice value="7" id= "7" > Speed 8 <input type="radio" name=choice value="8" id= "8" > Speed 9 <input type="radio" name=choice value="9" id= "9" > Speed 10 <input type="radio" name=choice value="10" id= "10" > <br>
Speed 11 <input type="radio" name=choice value="11" id= "11" > Speed 12 <input type="radio" name=choice value="12" id= "12" > Speed 13 <input type="radio" name=choice value="13" id= "13" > Speed 14 <input type="radio" name=choice value="14" id= "14" > Speed 15 <input type="radio" name=choice value="15" id= "15" > Speed 16 <input type="radio" name=choice value="16" id= "16" > Speed 17 <input type="radio" name=choice value="17" id= "17" > Speed 18 <input type="radio" name=choice value="18" id= "18" > Speed 19 <input type="radio" name=choice value="19" id= "19" > Speed 20 <input type="radio" name=choice value="20" id= "20" > <br>
</p>
</form>
<form id= "colorForm" class= "forms">
<p>
red <input type="radio" name= "option" value="red" id= "red" checked> yellow <input type="radio" name=option value="yellow" id= "yellow" > blue <input type="radio" name=option value="blue" id= "blue" >
</p>
</form>
</section>
<section>
<div class= "box">
Welcome
</div>
</section>
</body>
IN JS:
var userName = prompt("What's your name?", " ");
$(document).ready(function() {
$radios.change(function() {
let $checked = $radios.filter(function() {. // when radio buttons are changed for speed, check which was pressed
return $(this).prop('checked');
});
let speed = $checked.val()* 100; // set value of checked button (0-50) * 100 to the speed
$( ".boxes" ).effect( "shake", {times: 100}, speed); //creat a shake effect on the box div at the corresponding speed
});
});
//event listener for color
$(document).ready(function() {
$radios.change(function() {
let $checked = $radios.filter(function() {. // when radio buttons are changed for speed, check which was pressed and return that object as $checked var
return $(this).prop('checked');
});
let color = $checked.val(); // set value of checked button (0-50) * 100 to the speed
$( ".boxes" ).css("backgroundColor", color); //change color of box to corresponding radio button value (red, yellow, blue)
});
});