//This is my my html. I have created a textbox that I want my javascript code to display inside after pressing the "yes" button which activates the script. I also have two color selectors on the html page which I want to somehow link to the two color inputs in my javascript code. Help appreciated!/*
<!doctype html>
<html>
<link rel="stylesheet"href="styles.css">
<h1> New color Options </h1>
<h3> Choose your color </h3>
</body>
<br></br>
<br></br>
<br></br>
<br></br>
<script src="colors.js"></script>
<br>
<input type="text" id="textb">
<p id="results"></p>
<input type="button" value="Select" onclick="revme()">
<!-- this is the box -->
<div id="mybox" >
<label for="mybox"> </label>
<output name="mybox" type="text"><br>
</div>
<button onclick="ab()">Yes</button>
<div >
<script>
function ab() {
document.getElementById("mybox").innerHTML = tests()
}
</script>
</div>
</body>
</html>
//Here is my javascript//
function tests() {
let age = ("blue") ("blue");
if(age == "blue" "blue"){
document.getElementById("new").innerHTML = "Water Blue";
}
else if(age == "blue" "yellow"){
document.getElementById("new").innerHTML = "Green";
}
else if(age == "blue" "red"){
document.getElementById("new").innerHTML = "Purple";
}
else if(age == "blue" "green"){
document.getElementById("new").innerHTML = "Turquoise";
}
else if(age == "blue" "white"){
document.getElementById("new").innerHTML = "Light Blue";
}
else if(age == "yellow" "yellow"){
document.getElementById("new").innerHTML = "Cheese Yellow";
}
else if(age == "yellow" "blue"){
document.getElementById("new").innerHTML = "Green";
}
else if(age == "yellow" "red"){
document.getElementById("new").innerHTML = "Orange";
}
else if(age == "yellow" "green"){
document.getElementById("new").innerHTML = "Lime";
}
else if(age == "yellow" "white"){
document.getElementById("new").innerHTML = "Light yellow";
}
else if(age == "green" "green"){
document.getElementById("new").innerHTML = "grass green";
}
else if(age == "green" "yellow"){
document.getElementById("new").innerHTML = "lime green";
}
else if(age == "green" "blue"){
document.getElementById("new").innerHTML = "Turquoise";
}
else if(age == "green" "red"){
document.getElementById("new").innerHTML = "brown";
}
else if(age == "green" "white"){
document.getElementById("new").innerHTML = "light green";
}
else if(age == "red" "red"){
document.getElementById("new").innerHTML = "blood red";
}
else if(age == "red" "blue"){
document.getElementById("new").innerHTML = "purple";
}
else if(age == "red" "green"){
document.getElementById("new").innerHTML = "brown";
}
else if(age == "red" "yellow"){
document.getElementById("new").innerHTML = "orange";
}
else if(age == "red" "white"){
document.getElementById("new").innerHTML = "pink";
}
else if(age == "white" "white"){
document.getElementById("new").innerHTML = "paper white";
}
else if(age == "white" "red"){
document.getElementById("new").innerHTML = "pink";
}
else if(age == "white" "blue"){
document.getElementById("new").innerHTML = "light blue";
}
else if(age == "white" "green"){
document.getElementById("new").innerHTML = "light green";
}
else if(age == "white" "yellow"){
document.getElementById("new").innerHTML = "light yellow";
}
else {
document.getElementById("new").innerHTML = "None";
}
}
CodePudding user response：
Though this code has enough scope of improvement, still you can do something like this.
function tests(){
let selectedValue= document.getElementById("blendedColor").value;
let blendedColor;
if(selectedValue == '"blue" "blue"'){
blendedColor = "Water Blue";
} else if(selectedValue == '"blue" "yellow"'){
blendedColor = "Green";
} else if(selectedValue == '"blue" "red"'){
blendedColor= "Purple";
} else if(selectedValue == '"blue" "green"'){
blendedColor = "Turquoise";
} else if(selectedValue == '"blue" "white"'){
blendedColor = "Light Blue";
} else if(selectedValue == '"yellow" "yellow"'){
blendedColor = "Cheese Yellow";
} else if(selectedValue == '"yellow" "blue"'){
blendedColor = "Green";
} else if(selectedValue == '"yellow" "red"'){
blendedColor = "Orange";
} else if(selectedValue == '"yellow" "green"'){
blendedColor = "Lime";
} else if(selectedValue == '"yellow" "white"'){
blendedColor = "Light yellow";
} else if(selectedValue == '"green" "green"'){
blendedColor = "grass green";
} else if(selectedValue == '"green" "yellow"'){
blendedColor = "lime green";
} else if(selectedValue == '"green" "blue"'){
blendedColor= "Turquoise";
} else if(selectedValue == '"green" "red"'){
blendedColor = "brown";
} else if(selectedValue == '"green" "white"'){
blendedColor = "light green";
} else if(selectedValue == '"red" "red"'){
blendedColor = "blood red";
} else if(selectedValue == '"red" "blue"'){
blendedColor= "purple";
} else if(selectedValue == '"red" "green"'){
blendedColor = "brown";
} else if(selectedValue == '"red" "yellow"'){
blendedColor = "orange";
} else if(selectedValue == '"red" "white"'){
blendedColor = "pink";
} else if(selectedValue == '"white" "white"'){
blendedColor = "paper white";
} else if(selectedValue == '"white" "red"'){
blendedColor = "pink";
} else if(selectedValue == '"white" "blue"'){
blendedColor = "light blue";
} else if(selectedValue == '"white" "green"'){
blendedColor = "light green";
} else if(selectedValue == '"white" "yellow"'){
blendedColor = "light yellow";
} else {
blendedColor = "None";
}
document.getElementById("mybox").innerHTML = blendedColor
}<html>
<head>
<script src="colors.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
</body>
<h1> New color Options </h1>
<h3> Choose your color </h3>
<br></br>
<br>
<select name="blendedColor" id="blendedColor">
<option>Select Value</option>
<option value='"blue" "blue"'>"blue" "blue"</option>
<option value='"blue" "yellow"'>"blue" "yellow"</option>
<option value='"blue" "red"'>"blue" "red"</option>
<option value='"blue" "green"'>"blue" "green"</option>
<option value='"blue" "white"'>"blue" "white"</option>
<option value='"yellow" "yellow"'>"yellow" "yellow"</option>
<option value='"yellow" "blue"'>"yellow" "blue"</option>
<option value='"yellow" "red"'>"yellow" "red"</option>
<option value='"yellow" "green"'>"yellow" "green"</option>
<option value='"yellow" "white"'>"yellow" "white"</option>
</select>
<p id="results"></p>
<!-- this is the box -->
<div id="mybox" >
<label for="mybox"> </label>
<output name="mybox" type="text"><br>
</div>
<button onclick="tests()">Yes</button>
<div >
</div>
</body>
</html>CodePudding user response：
There are quite a few issues with your code:
- the
<output>element needs a closing tag, - an expression like
("blue") ("blue")can be simplified to"blueblue" - the
if-elsechain can be written much more easily by using a map or a simple object (see below:blended). - and last but not least you should follow the DRY principle: don't repeat yourself and do the expression
document.getElementById("new").innerHTML=...only once, with a previously calculated value.
function test(a,b){
const blended={blueblue:"Water Blue",blueyellow:"Green",blured:"Purple",bluegreen:"Turquoise",bluewhite:"Light blue",yellowyellow:"Cheese Yellow",yellowblue:"Green",yellowred:"Orange",yellowgreen:"Lime",yellowwhite:"Light yellow",greengreen:"grass green",greenyellow:"lime green",greenblue:"Turquoise",greenred:"brown",greenwhite:"light green",redred:"blood red",redblue:"purple",redgreen:"brown",redyellow:"orange",redwhite:"pink",whitewhite:"paper white",whitered:"pink",whiteblue:"light blue",whitegreen:"light green",whiteyellow:"light yellow"};
return blended[a b] || "None";
}
document.querySelector("#mybox output").textContent=test("green","yellow");<div id="mybox" >
<label for="mybox">The blended colour is </label>
<output name="mybox" type="text"><br>
</div>
CodePudding user response：
You can use switch&case instead of if&else
Additionally, you don't need to define a value for each option. To understand how select works without value, pay attention the following HTML code:
function fun(){
var obj = document.getElementById("blendedColor");
var c;
switch(obj.options[obj.selectedIndex].text){
case '"blue" "blue"': c="Water Blue"; break;
case '"blue" "yellow"': c="Green"; break;
case '"blue" "red"': c="Purple"; break;
case '"blue" "green"': c="Turquoise"; break;
case '"blue" "white"': c="Light Blue"; break;
case '"yellow" "yellow"': c="Cheese Yellow"; break;
case '"yellow" "blue"': c="Green"; break;
case '"yellow" "red"': c="Orange"; break;
case '"yellow" "green"': c="Lime"; break;
case '"yellow" "white"': c="Light yellow"; break;
case '"green" "green"': c="grass green"; break;
case '"green" "yellow"': c="lime green"; break;
case '"green" "blue"': c="Turquoise"; break;
case '"green" "red"': c="brown"; break;
case '"green" "white"': c="light green"; break;
case '"red" "red"': c="blood red"; break;
case '"red" "blue"': c="purple"; break;
case '"red" "green"': c="brown"; break;
case '"red" "yellow"': c="orange"; break;
case '"red" "white"': c="pink"; break;
case '"white" "white"': c="paper white"; break;
case '"white" "red"': c="pink"; break;
case '"white" "blue"': c="light blue"; break;
case '"white" "green"': c="light green"; break;
case '"white" "yellow"': c="light yellow"; break;
default: c= "None";
}
document.getElementById("results").innerHTML = c
}<!DOCTYPE html>
<html>
<head>
<script src="colors.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
</body>
<select name="blendedColor" id="blendedColor">
<option>Select Value</option>
<option>"blue" "blue"</option>
<option>"blue" "yellow"</option>
<option>"blue" "red"</option>
<option>"blue" "green"</option>
<option>"blue" "white"</option>
<option>"yellow" "yellow"</option>
<option>"yellow" "blue"</option>
<option>"yellow" "red"</option>
<option>"yellow" "green"</option>
<option>"yellow" "white"</option>
</select>
<p id="results">Please Query TO Show This</p>
<button onclick="fun()">Query</button>
</body>
</html>