My idea was to make a score based form using radio buttons and when you click the button, the script to running through the user’s answers and making a score which will display the result depending on that answer.
I’ve logged what’s wrong and came to the point where it was simply inside the loop function which could cause my function as a whole. Basically, the selected choice value was taken from the dictionary (of a dictionary) outside of my function and try to parseInt it but it was no good since the log returned it as NaN. Radio inputs seemed to work fine as well since the log before the value displayed the correct key name.
function skintypeResult() {
let totalScore = 0;
// Loop through each question
for (const question of form_questions) {
const selectedChoice = document.querySelector(`input[name="${question.name}"]:checked`).value;
console.log("Question:", question.name, "Selected Choice Value:", selectedChoice);
totalScore += parseInt(selectedChoice); // Add score directly from choice value
console.log("Question:", question.name, "Score:", totalScore);
}
// Determine skin type based on score ranges
let skinType = "Undetermined";
if (totalScore >= 6) {
skinType = "Fair Skin";
} else if (totalScore >= 0) {
skinType = "Light to Olive Skin";
} else if (totalScore < 0) {
skinType = "Medium to Dark Skin";
}
console.log("Calculated Skin Type:", skinType);
// Update result element
const resultElement = document.getElementById("result");
resultElement.textContent = "Your skin type is likely: " + skinType;
}
const form_questions = [{
name: "eye_color",
choices: {
choice1: 2, // Light blue, gray, or green (fair skin)
choice2: 0, // Blue, gray, or green (neutral)
choice3: -1, // Hazel or light brown (slightly darker)
choice4: -2, // Dark brown (more olive)
choice5: -3 // Brownish black (darkest skin)
},
},
{
name: "hair_color",
choices: {
choice1: 2, // Red or light blond (fair hair)
choice2: 1, // Blond (fair to light brown hair)
choice3: 0, // Dark blond or light brown (neutral)
choice4: -1, // Dark brown (darker hair)
choice5: -2 // Black (darkest hair)
},
},
{
name: "skin_color",
choices: {
choice1: 3, // Ivory white (fairest skin)
choice2: 2, // Fair or pale (fair skin)
choice3: 1, // Fair to beige with golden undertone (light skin)
choice4: 0, // Olive or light brown (neutral skin)
choice5: -2 // Dark brown or black (darker skin)
},
},
];<form id="quizForm">
<div class="card" id="question1">
<label class="card-header" for="question1">What is your eye color?</label>
<div class="card-choices">
<div class="choice">
<input type="radio" id="eye1" name="eye_color" class="radiobtn" value="choice1">
<label class="radio-text-margin" for="eye1">(Light) blue, gray, or green</label>
</div>
<div class="choice">
<input type="radio" id="eye2" name="eye_color" class="radiobtn" value="choice2">
<label class="radio-text-margin" for="eye2">Blue, gray, or green</label>
</div>
<div class="choice">
<input type="radio" id="eye3" name="eye_color" class="radiobtn" value="choice3">
<label class="radio-text-margin" for="eye3">Hazel or light brown</label>
</div>
<div class="choice">
<input type="radio" id="eye4" name="eye_color" class="radiobtn" value="choice4">
<label class="radio-text-margin" for="eye4">Dark brown</label>
</div>
<div class="choice">
<input type="radio" id="eye5" name="eye_color" class="radiobtn" value="choice5">
<label class="radio-text-margin" for="eye5">Brownish Black</label>
</div>
</div>
</div>
<div class="card" id="question2">
<label class="card-header" for="question2">What is your natural hair color?</label>
<div class="card-choices">
<div class="choice">
<input type="radio" id="hair1" name="hair_color" class="radiobtn" value="choice1">
<label class="radio-text-margin" for="hair1">Red or light blond</label>
</div>
<div class="choice">
<input type="radio" id="hair2" name="hair_color" class="radiobtn" value="choice2">
<label class="radio-text-margin" for="hair2">Blond</label>
</div>
<div class="choice">
<input type="radio" id="hair3" name="hair_color" class="radiobtn" value="choice3">
<label class="radio-text-margin" for="hair3">Dark blond or light brown</label>
</div>
<div class="choice">
<input type="radio" id="hair4" name="hair_color" class="radiobtn" value="choice4">
<label class="radio-text-margin" for="hair4">Dark brown</label>
</div>
<div class="choice">
<input type="radio" id="hair5" name="hair_color" class="radiobtn" value="choice5">
<label class="radio-text-margin" for="hair5"> Black</label>
</div>
</div>
</div>
<div class="card" id="question3">
<label class="card-header" for="question3">What is your natural skin color?</label>
<div class="card-choices">
<div class="choice">
<input type="radio" id="skin1" name="skin_color" class="radiobtn" value="choice1">
<label class="radio-text-margin" for="skin1">Ivory white</label>
</div>
<div class="choice">
<input type="radio" id="skin2" name="skin_color" class="radiobtn" value="choice2">
<label class="radio-text-margin" for="skin2">Fair or pale</label>
</div>
<div class="choice">
<input type="radio" id="skin3" name="skin_color" class="radiobtn" value="choice3">
<label class="radio-text-margin" for="skin3">Fair to beige with golden undertone</label>
</div>
<div class="choice">
<input type="radio" id="skin4" name="skin_color" class="radiobtn" value="choice4">
<label class="radio-text-margin" for="skin4">Olive or light brown</label>
</div>
<div class="choice">
<input type="radio" id="skin5" name="skin_color" class="radiobtn" value="choice5">
<label class="radio-text-margin" for="skin5">Dark brown or black</label>
</div>
</div>
</div>
<button onclick="skintypeResult()" id="submitButton" type="button">Evaluate My Skin Type</button>
<p id="result"></p>
</form>9