Upon inspection, it seems that the HTML code is fine, but there appears to be an issue with the JavaScript. I also need to store the answers in an array, which is a task for later.
<form>
<fieldset>
<legend>Content:</legend>
<label><input type="radio" name="content" value="bad"/>bad</label>
<label><input type="radio" name="content" value="average"/> average</label>
<label><input type="radio" name="content" value="good"/> good</label>
<label><input type="radio" name="content" value="excellent"/> excellent</label>
</fieldset>
<br>
<fieldset>
<legend>Style:</legend><h5>the site needs more:</h5>
<label2><input type="checkbox" name="style" value="color"/>color</label2>
<label2><input type="checkbox" name="style" value="whitespace"/>
white space</label2>
<label2><input type="checkbox" name="style" value="Texture"/> Texture</label2>
<label2><input type="checkbox" name="style" value="Icons"/> Icons</label2>
</fieldset>
<br>
<fieldset>
<legend>Usability:</legend>
<label><input type="radio" name="usability" value="bad"/> bad</label>
<label><input type="radio" name="usability" value="average"/> average</label>
<label><input type="radio" name="usability" value="good"/> good</label>
<label><input type="radio" name="usability" value="excellent"/> excellent</label>
</fieldset>
<br>
<fieldset>
<legend>Theme:</legend>
<label><input type="radio" name="Theme" value="bad"/> bad</label>
<label><input type="radio" name="Theme" value="average"/> average</label>
<label><input type="radio" name="Theme" value="good"/> good</label>
<label><input type="radio" name="Theme" value="excellent"/> excellent</label>
</fieldset>
<br>
<fieldset>
<legend>Optimization</legend>
<label><input type="radio" name="Optimization" value="bad"/> bad</label>
<label><input type="radio" name="Optimization" value="average"/> average</label>
<label><input type="radio" name="Optimization" value="good"/> good</label>
<label><input type="radio" name="Optimization" value="excellent"/> excellent</label>
</fieldset>
<input type="button" value="Submit">
</form>
I suspect that the event listener is malfunctioning due to a potential error in the check function. As I continue learning, I am gradually grasping the fundamentals.
var contentFlag = false, styleFlag = false, usabilityFlag = false, themeFlag = optimizationFlag = false;
var btnSubmit = document.querySelector("input[type='button']");
btnSubmit.addEventListener("click", check);
function check(){
var messages = [];
messages.push(checkContent());
messages.push(checkStyle());
messages.push(checkUsability());
messages.push(checkTheme());
messages.push(checkOptimization());
if (contentFlag && styleFlag && usabilityFlag && themeFlag && optimizationFlag){
var content = document.querySelector("input[name='content']:checked").value;
var styleFields = Array.prototype.slice.call(document.querySelectorAll("input[name='style']:checked"));
var style = styleFields.map(function(item){
return item.value;
});
style = style.join(", ");
var usability = document.querySelector("input[name='usability']:checked").value;
var theme = document.querySelector("input[name='theme']:checked").value;
var optimization = document.querySelector("input[name='optimization']:checked").value;
alert("Thank you for your input");
} else {
var message = messages.join(", ");
alert("You haven't selected: " + message);
}
}
function checkContent(){
if(document.querySelector("input[name='content']:checked")){
contentFlag = true;
} else {
contentFlag = false;
return "content";
}
}
function checkStyle(){
if(document.querySelector("input[name='style']:checked")){
styleFlag = true;
} else {
styleFlag = false;
return "style";
}
}
function checkUsability(){
if (document.querySelector("input[name='usability']:checked")){
usabilityFlag = true;
} else {
usabilityFlag = false;
return "usability";
}
}
function checkTheme(){
if (document.querySelector("input[name='theme']:checked")){
themeFlag = true;
} else {
themeFlag = false;
return "theme";
}
function checkOptimization(){
if (document.querySelector("input[name='optimizationt']:checked")){
optimizationFlag = true;
} else {
optimizationFlag = false;
return "optimization";
}
}
}