I am trying to create a buyers guide. Based upon the options a user selects from the 3 dropdown menus. It will inturn display to the user which object is best for them. So as you can see I have already created the drop down menu and applied the css successful. My issue is regarding the javascript. I want to make it so when the user selects various items from the dropdown box, the text box at the bottom will spit out the product which is best for them. For example if the user selects .045mm, 4 J/mm2, and ZF ECOFLUID M, then the product that is best for them is AvCarb 1057. If the user selects 0.45mm, 1 J/mm2, and ZF ecofluid M then the product that is best for them is AvCarb 1000. If a combination is selected that does not result in a product I want the box to say "Contact Avcarb"
Here is what I have so far
function dropdown()
{
if (document.getElementById("thick").value == "≤ 0.40 mm" && document.getElementById("elevel").value == "1 J/mm2" && document.getElementById("otype").value == "ZF ECOFLUID M" )
{
document.getElementById("best").value="Contact Av";
}
}
input[type=text], select {
font-size:20px;
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
option{font-family: 'Open Sans', sans-serif;
font-size:20px;}
input[type=submit] {
width: 100%;
font-size:20px;
background-color:#007ea4;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #8f9199;
;
}
div {
border-radius: 5px;
background-color: #00223b;
padding: 20px;
}
label{
font-size:20px;
color:white;
font-family: 'Open Sans', sans-serif;
}
h1 {font-family: 'Noto Sans', sans-serif;
border-radius: 5px;
background-color: #00223b;
padding: 20px;
color:white;
}
p { font-size:20px;
color:white;
font-family: 'Open Sans', sans-serif;}
var contents = $('#contents');
jquery.pasreHTML()
<head>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<h1>Friction Material Buyers Guide</h1>
<div>
<form action="/action_page.php">
<label for="thick">Thickness:</label>
<select id="thick" name="thick">
<option>Choose Thickness...</option>
<option value="≤ 0.40 mm"> ≤ 0.40 mm </option>
<option value="0.40 mm"> ≤ 0.40 mm </option>
<option value="0.45 mm">>0.45 mm </option>
<option value="0.50 mm"> 0.50 mm </option>
<option value="0.60 mm"> 0.60 mm </option>
<option value="0.65 mm">0.65 mm </option>
<option value="0.70 mm"> 0.70 mm </option>
<option value="≥ 0.70 mm"> ≥ 0.70 mm </option>
</select>
<label for="elevel">Energy Level:</label>
<select id="elevel" name="elevel">
<option>Choose Energy Level ... </option>
<option value="1 J/mm2"> 1 J/mm2</option>
<option value="2 J/mm2"> 2 J/mm2 </option>
<option value="3 J/mm2">3 J/mm2 </option>
<option value="4 J/mm2"> 4 J/mm2 </option>
<option value="5 J/mm2"> 5 J/mm2 </option>
<option value="6 J/mm2">6 J/mm2</option>
</select>
<label for="otype">Oil Type:</label>
<select id="otype" name="otype">
<option>Choose Oil Type...</option>
<option value="ZF ECOFLUID M"> ZF ECOFLUID M </option>
<option value="75W-85"> 75W-85 </option>
<option value="75W-90"> 75W-90 </option>
<option value="80W-90"> 80W-90</option>
<option value="85W-140"> 85W-140 </option>
<option value="FFL-4"> FFL-4 </option>
</select>
<input type="submit" value="Submit">
<p> The Best Material For You Is: <input type="text" id="best" size='40'></p>
</form>
But I am for sure missing something. I would greatly appreciate the help.
Thanks for the helpstrong text
Aucun commentaire:
Enregistrer un commentaire