Question

我已经发起了Daily 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>

Answer 1

在HTML中，您具有：

<input id="numberInput" class="numberInput" type="number" onkeyUp="document.getElementById('creditCard').innerHTML=this.value">

您正在通过ID'creditCard'来获取元素，该ID是整个信用卡。

尝试将其更改为：

<input id="numberInput" class="numberInput" type="number" onkeyUp="document.getElementById('printNumbers').innerHTML=this.value">

这样，您将获得ID为'printNumbers'的元素，它将替换#printNumbers元素的innerHTML。

Answer 2

您应该使用document.getElementById('printNumbers').innerHTML=this.value而不是document.getElementById('creditcard').innerHTML=this.value。

第二个只是将整个html替换为this.value。

在表格上打印时图像消失

2 个答案: