我已经开始了每日UI挑战来推动自己，我遇到了一个绊脚石。
当我在卡号字段中输入数字时，它似乎覆盖了我导入的图像。
可能是非常明显的东西，但我就是不能把手指放在上面。
代码有点到处都是，但我对此比较陌生！
@import url("https://fonts.googleapis.com/css?family=Arimo|Roboto");
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed");
#wrapper {
height: 600px;
width: 600px;
background-color: white;
margin: 0 auto;
border-radius: 10px;
padding: 20px;
text-align: center;
font-family: "Roboto", sans-serif;
}
#creditcard {
height: 200px;
width: 400px;
background-color: rgba(55, 153, 255, 1);
margin: 0 auto;
border-radius: 10px;
box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.32);
font-family: "Roboto Condensed", sans-serif;
}
.numberInput {
padding-left: 3px;
width: 125px;
float: left;
margin: 20px 10px 10px 10px;
line-height: 1em;
font-size: 30px;
border-radius: 10px;
border: 0px solid white;
box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.32);
outline-width: 0;
}
.nameInput {
margin-top: 20px;
width: 250px;
line-height: 1em;
font-size: 30px;
border-radius: 10px;
border: 0px solid white;
box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.32);
outline-width: 0;
}
#expiryInfo {
margin: 10px 0px 0px 170px;
width: 250px;
font-size: 30px;
}
select {
border-radius: 10px;
border: 0px solid white;
}
label {
font-size: 30px;
}
#visalogo {
height: 20px;
margin-left: 300px;
margin-top: 10px;
}
#chiplogo {
height: 30px;
float: left;
margin-left: 50px;
margin-top: 50px;
}
#submit {
border: none;
border-radius: 10px;
background: grey;
transition: 0.5s ease-in-out;
transition-property: background, color;
font-size: 30px;
margin-top: 50px;
box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.32);
padding: 10px;
font-family: "Roboto", sans-serif;
}
#submit:hover {
background: rgba(55, 153, 255, 1);
color: white;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Credit Card Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="wrapper">
<div id="creditcard">
<div id="cardContent">
<img id="visalogo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Visa_Inc._logo.svg/800px-Visa_Inc._logo.svg.png" alt="visa logo">
<img id="chiplogo" src="https://cdn3.iconfinder.com/data/icons/electronic-3/500/Chip-512.png" alt="chip logo">
<div id="printNumbers">
</div>
</div>
</div>
<div id="divinfocontainer">
<form id="numberinfo">
<br>
<label for="box1">Card Number</label>
<div class="box1">
<input id="numberInput" class="numberInput" type="number" onkeyUp="document.getElementById('creditcard').innerHTML=this.value">
</div>
<div class="box2">
<input id="numberInput" class="numberInput" type="number" onkeyUp="document.getElementById('creditcard').innerHTML=this.value">
</div>
<div class="box3">
<input id="numberInput" class="numberInput" type="number" onkeyUp="document.getElementById('creditcard').innerHTML=this.value">
</div>
<div class="box4">
<input id="numberInput" class="numberInput" type="number" onkeyUp="document.getElementById('creditcard').innerHTML=this.value">
</div>
</form>
<div id="name">
<label for="nameInput">Name on Card<br></label>
<input class="nameInput" type="text">
</div>
<div id="expiryInfo">
<label>Expiration Date</label>
<select>
<option value="01">January</option>
<option value="02">February </option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select>
<option value="13"> 2018</option>
<option value="14"> 2019</option>
<option value="15"> 2020</option>
<option value="16"> 2021</option>
</select>
</div>
</div>
<div id="submitButton">
<button id="submit">
Continue to checkout
</button>
</div>
</div>
</body>
</html>在你的 HTML 中，你有：
<input id="numberInput" class="numberInput" type="number" onkeyUp="document.getElementById('creditCard').innerHTML=this.value">
您通过ID"信用卡"获得元素，这是整个信用卡。
尝试将其更改为：
<input id="numberInput" class="numberInput" type="number" onkeyUp="document.getElementById('printNumbers').innerHTML=this.value">
这样，您将通过 ID 'printNumbers' 获得元素，这将替换 #printNumbers 元素的 innerHTML。
你应该使用document.getElementById('printNumbers').innerHTML=this.value而不是document.getElementById('creditcard').innerHTML=this.value。
第二个只是用this.value替换整个html。