2
自昨天以來，我一直在爲此付出代價，但無濟於事。我需要做的是製作一張表格並顯示自定義賀卡。我們被允許使用圖片作爲卡片（將它們設置爲輸出的背景）。表單應該讓用戶輸入一些自定義信息，例如收件人姓名，顏色信息，字體大小和其他信息。應該有一個「製作卡片」按鈕，當他們擊中它時，隱藏表格（通過改變相應元素的CSS可見性或顯示屬性）並顯示一張卡片，以簡單而優雅的設計將他們和他們輸入的其他配置細節。如何在同一窗口中顯示窗體輸出並隱藏窗體
此外，我需要根據他們在賀卡類型中的選擇來獲得背景圖片，並在卡上爲他們選擇的人物貼上一張小尺寸的圖片。
任何幫助將不勝感激。
以下是我的Java腳本的CSS和HTML代碼：
<script>
function selectAll() {
for (i = 0; i < document.forms[0]['charac'].length - 1; i++)
document.forms[0]['charac'][i].checked = document.forms[0]['charac'][5].checked;
}
document.forms[0]['charac'][5].addEventListener('click', selectAll);
function myCard() {
document.getElementById("formOutput").style.backgroundImage = "url('birthday-card.jpg')";
var selected;
if (selected == document.forms[0]['card'][0]) {
document.body.style.backgroundImage = "url('birthday-card.jpg')";
document.getElementById("formOutput").innerHTML = "name";
}
}
function myFunction() {
var a = document.getElementById("txtName").value;
var b = document.getElementById("txtName1").value;
var c = document.getElementById("content-field").value;
document.getElementById("formOutput").innerHTML = a + " " + b + " " + c;
} < /script><style> #wrapper {
border: 3px black;
}
body {
background-image: url("blank-card1.jpg");
background-size: cover;
background-repeat: no-repeat;
text-align: center;
}
table {
/* background-image: image("blank-card.jpg");*/
text-align: center;
margin-left: auto;
margin-right: auto;
}
table td {
height: 15px;
/* width: 15px;*/
text-align: left;
}
</style><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Generate a Greeting Card</title>
</head>
<body>
<h3>Fill out the following information and select a card to view how it looks.</h3>
<form id="formCard" action="">
<fieldset>
<legend>Personal information:</legend>
<table>
<tr>
<td>
<label for="txtName">Your Name<span style="color:red">*</span>
</label>
</td>
<td>
<input type="text" id="txtName" name="name" value=" " required/>
</td>
</tr>
<tr>
<td>
<label for="txtName1">Your Family Member's
<br>OR Friend's Name<span style="color:red">*</span>
</label>
</td>
<td>
<input type="text" id="txtName1" name="name1" value=" " required/>
</td>
</tr>
<tr>
<td>
<label for="txtAddress">Address</label>
</td>
<td>
<input type="text" id="txtAddress" name="address" value=" ">
</td>
</tr>
<tr>
<td>
<label for="postalCode">Postal Code<span style="color:red">*</span>
</label>
</td>
<td>
<input type="text" id="postalCode" name="postalcode" value=" " required/>
</td>
</tr>
<tr>
<td>Province<span style="color:red">*</span>
</td>
<td>
<select id="selProvince" name="province" required>
<option value="" selected>Please select...</option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="NB">New Brunswick</option>
<option value="NFL">Newfoundland and Labrador</option>
<option value="NW">Northwest Territories</option>
<option value="NS">Nova Scotia</option>
<option value="NU">Nunavut</option>
<option value="ON">Ontario</option>
<option value="PEI">Prince Edward Island</option>
<option value="QC">Quebec</option>
<option value="SK">Saskatchewan</option>
<option value="YK">Yukon</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="txtPhone">Phone<span style="color:red">*</span>
</label>
</td>
<td>
<input type="text" id="txtPhone" name="phone" value=" " required/>
</td>
</tr>
<tr>
<td>
<label for="txtEmail">Email<span style="color:red">*</span>
</label>
</td>
<td>
<input type="text" id="txtEmail" name="email" required/>
</td>
</tr>
<tr>
<td>Would you like to send it
<br>via email or mail<span style="color:red" required>*</span>
</td>
<td>
<label>
<input type="radio" name="route" value="m" />Mail</label>
<label>
<input type="radio" name="route" value="e" />Email</label>
</td>
</tr>
<tr>
<td>Type of Greeting Card:<span style="color:red">*</span>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</td>
<td>
<br>
<label>
<input type="radio" name="card" id="birthday" value="bd" />Birthday</label>
<br>
<label>
<input type="radio" name="card" id="valentine" value="vd" />Valentines Day</label>
<br>
<label>
<input type="radio" name="card" id="friendship" value="frd" />Friendship Day</label>
<br>
<label>
<input type="radio" name="card" id="mother" value="md" />Mother's Day</label>
<br>
<label>
<input type="radio" name="card" id="father" value="fad" />Father's Day</label>
<br>
<label>
<input type="radio" name="card" id="newYear" value="nyd" />New Year's Day</label>
<br>
<label>
<input type="radio" name="card" id="christmas" value="cd" />Christmas Day</label>
<br>
<br>
</td>
</tr>
<tr>
<td>Choose the person's
<br>Favourite cartoon charcters:<span style="color:red">*</span>
<br>
<br>
<br>
<br>
<br>
</td>
<td>
<label>
<input type="checkbox" name="charac" value="mickeyMouse" checked/>Mickey Mouse & Clubhouse</label>
<br>
<label>
<input type="checkbox" name="charac" value="scoobyDoo" />Scooby Doo</label>
<br>
<label>
<input type="checkbox" name="charac" value="tomJerry" />Tom & Jerry</label>
<br>
<label>
<input type="checkbox" name="charac" value="tweetiePie" />Tweetie Pie</label>
<br>
<label>
<input type="checkbox" name="charac" value="donaldDuck" />Donald Duck</label>
<br>
<label>
<input type="checkbox" name="charac" value="selectAll" />Select All</label>
</td>
</tr>
<tr>
<td>Choose a colour for the
<br>text on the card:</td>
<!--color code from w3schools.org-->
<td>
<input type="color" id="html5colorpicker" onchange="clickColor(0, -1, -1, 5)" value="#ff0000" style="width:85%;">
</td>
</tr>
<tr>
<td>
<label>Content</label>
</td>
<td>
<textarea id="content-field" cols="20" rows="2" value=" "></textarea>
</td>
</tr>
<tr>
<td>Choose an image to put on
<br>the card to make it special.</td>
<td>
<label>
<input type="file" name="pic" accept="image/*">
</label>
</td>
</tr>
<tr>
<td> </td>
<td>
<br>
<br>
<input onclick="myFucntion()" type="submit" value="SEND" />
<input type="reset" value="CLEAR" />
</td>
<td> </td>
</tr>
</table>
</fieldset>
</form>
<p><span id="formOutput"></span>
</p>
</body>
</html>
SEND按鈕與您在問題中討論的「make card」按鈕等價嗎？ – ConnorsFan
是的，它是一樣的 – Ash