這個想法是 為用戶提供選擇選項和最佳就業部門。
部門將被建議由表格基于他的選擇。
<!DOCTYPE html>
<html lang="en">
<head>/span>
<meta charset="UTF-8">/span>
< meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"/span> content=
"width=device-width, initial-scale=1.0">
<title>
調查，將給你建議。
</title>調查將給你提供建議。
<style>
/* Body元素的樣式，即顏色。
字體，對齊方式 */
body {
background-color: #05c46b;
font-family: Verdana;
text-align: center;
}
/* Styling the Form (Color, Padding, Shadow) */
form {
background-color: #fff;
max-width: 500px;
margin: 50px auto;
padding: 30px 20px;
box-shadow: 2px 5px 10px rgba（0, 0, 0, 0. 5）。)
}
/* Styling form-control Class */; }
.form-control {
text-align: left;
margin-bottom: 25px;
}
/* Styling form-control Label */
.form-control label {
display: block;
margin-bottom: 10px;
}
/* Styling form-control input,
選擇，textarea */
.form-control input,
.form-control選擇。
.form-control textarea {
border: 1px solid #777;
border-radius: 2px;
font-family: 繼承。
padding: 10px;
display: block;
width: 95%;
}
/* Styling form-control Radio
按鈕和復選框 */
.form-control input[type="radio"]。
.form-control input[type="checkbox"]/span> {
display: inline-block;
width: auto;
}
/*造型按鈕 */
button {
background-color: #05c46b;
border: 1px solid #777;
border-radius: 2px;
font-family: 繼承。
font-size: 21px;
display: block;
width: 100%;
margin-top: 50px;
margin-bottom: 20px;
</style>>
</head>/span>
這個表單是用HTML制作的，對于javascript操作，我在復選框中添加了 value=1的復選框，以生成不同的輸出字串。 請查看下面的代碼，以便更好地理解。
<body>
<h1>您的作業型別調查建議測驗</h1>
<!--創建表格-->
<form id="form">
<!--詳情-->
<div class="form-control">
< label for="name" id="label-name">
名稱
</label>名稱
<!--輸入型別文本-->/span>
<input type="text"/span>
id="name"/span>
placeholder="Enter your name"/>
</div>
<div class="form-control">
< label for="email" id="label-email">
電子郵件
</label> 電子郵件
<!--輸入型別Email-->/span>
<input type="email"/span>
id="email"
placeholder="Enter your email"/>
</div>
<div class="form-control">
< label for="age" id="label-age">
年齡
</label>年齡
<!--輸入型別文本-->/span>
<input type="text"/span>
id="age"/span>
placeholder="Enter your age" <>
</div>
<div class="form-control">
< label for="role" id="label-role">
哪個選項最能描述你？
</label>
<!-- 下拉選項-->
< select name="role"/span> id="role"/span>>
<option value="student"/span>> Student</option>。
<option value=" intern"> Intern</option>。
<option value="professional" >
專業的
</option>專業人員
<option value="other"/span>> Other</option>
</select>/span>
</div>/span>
<div class="form-control">
<label>
你喜歡學習嗎？
</label>你喜歡學習嗎？
<!--輸入型別單選按鈕-->/span>
<label for="recommed-1">
<input type="radio">
id=" recommed-1"
name="recommed">/span>Yes</input>/span>
</label>/span>
<label for="recommed-2"/span>>
<input type="radio">
id=" recommed-2"
name="recommed">/span>No</input>/span>
</label>/span>
<label for="recommed-3">
<input type="radio">
id=" recommed-3"
name="recommed">Maybe</input>/span>
</label>/span>
</div>/span>
<div class="form-control">
<label>你擁有的技能
<small>（選中所有適用的）</small>
</label>/span>
<!--輸入型別復選框-->/span>
<label for="inp-1">/span>
< 輸入 型別="checkbox" 名稱="inp" id="c" value=1> 編碼</input></label>
<label for="inp-2"/span>>
< 輸入 型別="checkbox" 名稱="inp" id="d" value= 2> Dancing</input></label>
</div>/span>
<button onclick="checkCheckbox()"/span>>
提交
</button> 提交
</form>
目前只有2個問題在form中，我希望添加更多的
問題，根據選擇，表單將建議。在此
提醒或任何資訊i`輸入代碼這里沒有顯示任何錯誤。
<script>
function checkCheckbox（）{
var c = document.getElementById("c") 。
var d = document.getElementById("d") 。
var add=0.
if (c.checked == true){
var y = document.getElementById("c"/span>).value。
var add=y;
return add。
}
else if (d.checked == true){
var n = document.getElementById("d"/span>).value。
var add = n;
}
else {
return document.getElementById("error") 。 innerHTML = "*Please mark any of checkbox";
}
if（add==2）{
alert('You are multi-talented! become a dancer or a coder')。
}
else{
alert('成為一名編碼員')。
</script>>
</body>
</html>
在這里，當選擇舞蹈和編碼時，應該有不同的輸出。 在選擇舞蹈或編碼時，應顯示不同的輸出。 編碼時應顯示不同的輸出。 如果有更好的方法來完成這個想法。
uj5u.com熱心網友回復：
在腳本部分有幾個錯誤。你可以在瀏覽器中使用Web Developer的除錯功能來檢查它們。我可以看出，你是一般的編碼新手，所以有幾個常見的錯誤，我們在開始時都犯過。
這是寫函式的一種方法，所以它能按我認為的那樣作業：
這是寫函式的一種方法。
function checkCheckbox() {
var c = document.getElementById("c"/span>)。
var d = document.getElementById("d") 。
var add = 0, val;
if (c.checked == true){
val = "coder"/span>;
add = 1;
}
if (d.checked == true){
val = "dancer"/span>;
add = 1;
}
if (add == 2) {
alert('You are multi-talented! become a dancer or a coder') 。
return true。
}
else if (add == 1) {
alert('成為一個' val)。
return true。
}
else {
document.getElementById("error").innerHTML = "*Please mark any of checkbox" ;
return false。
}
另外，你需要在按鈕的事件處理程式中添加return，以避免它在表單無效時提交：
< button onclick="return checkCheckbox()">Submit</button>
最后，為腳本中提到的錯誤資訊添加一個元素。類似于：
< div id="error"></div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/326114.html
標籤：
上一篇：沒有輸入的Azurepowershell函式執行失敗，因為輸入不是base-64。
下一篇：使影像下的按鈕可以點擊