javascript - 在表格上打印时图像消失

我已经开始 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>

最佳答案

在您的 HTML 中，您有:

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

您正在通过 ID“creditCard”获取元素，这是整个信用卡。

尝试将其更改为:

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

这样，您将通过 ID“printNumbers”获取元素，这将替换 #printNumbers 元素的 innerHTML。

关于javascript - 在表格上打印时图像消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52374391/

javascript - 在表格上打印时图像消失

上一篇：html - 渐变创建伪按钮的问题

下一篇：html - 导航栏 Div 正在覆盖另一个 Div