我是編碼新手。 我想在按下按鈕后在我的 html 頁面上的文本框中顯示來自我的 javascript 文件的 java 代碼結果
[英]I am new to coding. I would like to display my java code result from my javascript file in a text box on my html page after pressing a button
問題描述
//這是我的 html。 我創建了一個文本框，我希望我的 javascript 代碼在按下激活腳本的“是”按鈕后顯示在里面。 我在 html 頁面上也有兩個顏色選擇器，我想以某種方式鏈接到我的 javascript 代碼中的兩個顏色輸入。 幫助表示贊賞！/ *
<!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" class="box">
<label for="mybox"> </label>
<output name="mybox" type="text"><br>
</div>
<button onclick="ab()">Yes</button>
<div class="testing">
<script>
function ab() {
document.getElementById("mybox").innerHTML = tests()
}
</script>
</div>
</body>
</html>
//這是我的javascript//
function 測試（）{
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";
}
}
3 個解決方案
解決方案1
0 2022-08-09 05:37:23
您的代碼存在很多問題：
-
<output>元素需要一個結束標簽， - 像
("blue")+("blue")這樣的表達式可以簡化為"blueblue" - 通過使用 map 或簡單的 object （見下文：
blended），可以更輕松地編寫if-else鏈。 - 最后但並非最不重要的一點是，您應該遵循 DRY 原則：不要重復自己，並且只執行一次表達式
document.getElementById("new").innerHTML=...，並使用先前計算的值。
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" class="box"> <label for="mybox">The blended colour is </label> <output name="mybox" type="text"><br> </div>
解決方案2
0 已采納 2022-08-09 06:24:06
雖然這段代碼有足夠的 scope 改進，但你仍然可以做這樣的事情。
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 value=>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" class="box"> <label for="mybox"> </label> <output name="mybox" type="text"><br> </div> <button onclick="tests()">Yes</button> <div class="testing"> </div> </body> </html>
解決方案3
0 2022-08-09 08:04:23
您可以使用switch & case代替if & else
此外，您不需要為每個option定義一個value 。 要了解select如何在沒有value的情況下工作，請注意以下 HTML 代碼：
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>
我如何將Http獲取請求文件中的Json數據顯示到空白html頁面上
[英]How would I display a Json data from my Http get request file onto a blank html page
我是編碼新手。 我們可以用更簡單的方式編寫這個 setTimeOut 代碼並調用它嗎？
[英]I am new on coding. Can we write this setTimeOut code in a simpler way and call it?
我想使用 HTML 和 JavaScript 執行 While 循環，但是使用我當前的代碼循環並沒有結束
[英]I would like to do a While loop using HTML and JavaScript however with my current code the loop is not ending
如何像 iPhone 一樣在 HTML 文本輸入框中放置一個清除按鈕？
[英]How do I put a clear button inside my HTML text input box like the iPhone does?
javascript新手，我該如何嵌入javascript文件並在HTML字段中運行它？
[英]New to javascript, how would I embed my javascript file and run it in an HTML field?
我在下面的文本框中輸入文本后，如何將網頁下載為 .html/.png 是我的代碼
[英]how can download webapge as .html/.png after i inputed text in text box below is my code
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
我不知道我的編碼有什么問題。 （javascript）
我如何將Http獲取請求文件中的Json數據顯示到空白html頁面上
我是編碼新手。 我們可以用更簡單的方式編寫這個 setTimeOut 代碼並調用它嗎？
我希望我的 javascript 按鈕引用外部鏈接
我想使用 HTML 和 JavaScript 執行 While 循環，但是使用我當前的代碼循環並沒有結束
如何像 iPhone 一樣在 HTML 文本輸入框中放置一個清除按鈕？
javascript新手，我該如何嵌入javascript文件並在HTML字段中運行它？
我需要幫助修復我的代碼
如何在html文件中顯示es6組件？
我在下面的文本框中輸入文本后，如何將網頁下載為 .html/.png 是我的代碼
相關標簽