输入字符串被浏览器视为文本对象

Question

我有一个弹出窗口，显示一个用户的表单输入，供提交前进行查看/编辑。除了将输入字段值视为文本对象之外，所有信息都可以毫无问题地检索和显示，因此显示不正确。我知道发生了什么，我只是丝毫不知道如何解决它的线索。我以前从未遇到过这个问题。应该先将值填充到字符串变量中，还是我没有意识到一些晦涩的转换问题？快照来自最新版本的chrome。第二张图片显示了有问题的文本与其旁边的文本被视为独立的对象。

function chkThis() {
  var isChk = document.getElementsByName('agecert');
  var isSub = document.getElementById('submit');
  isSub.disabled = !isChk[0].checked;
}

function shPop() {
  var shPop = document.getElementById("myOlay");
  var rvwBdy = '';
  rvwBdy = '<p><b>Name:</b> ' + document.getElementById('fname').value + ' ' + document.getElementById('lname').value + '<BR />' +
    '<B>Email:</B> ' + document.getElementById('email').value + '<BR />' +
    '<B>Phone:</B> ' + document.getElementById('phone').value + '<BR />' +
    '<B>Address:</B> ' + document.getElementById('maddr').value + '</p>';

  shPop.classList.remove('dk-hidden');
  shPop.classList.add('dk-show');
  document.getElementById('reviewHere').innerHTML = rvwBdy;
}

function hdPop() {
  var hdPop = document.getElementById("myOlay");
  hdPop.classList.remove('dk-show');
  hdPop.classList.add('dk-hidden');
}

:root {
  --dkVar: '';
}

* {
  margin: 0;
  padding: 0;
  position: absolute;
  font-family: sans-serif;
  @include pre1(box-sizing, border-box);
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background: #8080FF;
}

a {
  text-decoration: none;
}

.dk-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dk-vertz {
  top: 50%;
  transform: translateY(-50%);
}

.dk-hortz {
  left: 50%;
  transform: translateX(-50%);
}

#dk-wrapper {
  width: 100%;
  height: 100%;
}

#dk-logo {
  top: 0;
  width: 100%;
  height: 125px;
}

#dk-menu {
  top: 125px;
  left: 0;
  min-width: 500px;
  width: 100%;
  height: 75px;
  background: #338833;
  text-align: center;
}

#dk-body {
  top: 210px;
  width: 75%;
  height: 75%;
  background: rgba(192, 192, 255, 0.8);
  border-radius: 25px;
}

h1,
h2,
h3,
h4,
h5 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dk-logo {
  width: 400px;
}

.dk-order {
  min-width: 500px;
  min-height: 700px;
}

.input {
  width: 175px;
  height: 40px;
  padding-left: 20px;
  margin-left: 20px;
  display: inline-block;
  border: 2px solid #309930;
  border-radius: 5px;
  line-height: 40px;
  z-index: 9;
  position: relative;
  font-size: 18px;
}

.label {
  display: block;
  margin-left: 30px;
  position: relative;
  font-size: 8pt;
  color: red;
  z-index: 10;
}

.icon {
  height: 35px;
  width: 35px;
  padding-top: 3px;
  background: #fff;
  border: 2px solid #309930;
  border-radius: 100%;
  z-index: 10;
  font-size: 32px;
  text-align: center;
  overflow: hidden;
}

.input:focus {
  border: 2px solid #30ff30;
  background: #ffddff;
}

#inp1 {
  top: 15px;
  left: 25px;
  width: 175px;
  position: absolute;
}

#inp2 {
  top: 15px;
  left: 190px;
  width: 175px;
  margin-left: 50px;
}

#inp3 {
  top: 85px;
  left: 25px;
  width: 175px;
}

#inp4 {
  top: 85px;
  left: 190px;
  width: 175px;
  margin-left: 50px;
}

#inp5 {
  top: 150px;
  left: 25px;
}

.dk-mydiv {
  top: 210px;
  width: 500px;
  height: 750px;
  position: absolute;
  border: none;
  background: #bbbbff;
  border-radius: 25px;
}

.maddr {
  width: 400px;
  height: 125px;
  line-height: 22px;
}

button {
  color: #555555;
  font-weight: bold;
  width: 100px;
  height: 35px;
  background: #99ff99;
  border: 1px solid #44aaee;
}

button:enabled {
  transition: all 250ms linear 0.0ms;
}

button:disabled {
  color: #bbbbbb;
  font-weight: bold;
  width: 100px;
  height: 35px;
  border: #44aaee;
  background: #555555;
  opacity: 0.75;
  cursor: not-allowed;
}

button:hover:enabled,
button:focus:enabled {
  color: black;
  font-weight: bold;
  width: 100px;
  height: 35px;
  background: #55ff55;
  border: 2px solid #44aaee;
  border-radius: 35px;
  box-shadow: 5px 3px 1px 1px rgba(0, 0, 0, .75);
}

.product {
  width: 40px;
  top: 10px;
  left: 10px;
  position: absolute;
  height: 25px;
  margin-left: 0px;
  padding: 0px;
}

.inplab {
  top: 15px;
  left: 60px;
  position: absolute;
}

#dk-intro {
  top: 210px;
  left: 15px;
}

#myOlay {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  display: block;
  z-index: 999;
  position: fixed;
}

#cbReview {
  min-width: 500px;
  height: 75%;
  position: fixed;
  background: white;
  color: black;
  border: 2px solid #0055cc;
  border-radius,
  25px;
  z-index: 1000;
}

.dk-hidden {
  visibility: hidden;
}

.dk-show {
  visibility: visible;
}

<div class="dk-mydiv dk-hortz">
  <form name="cbOrder" method="post" action="php/cb-cont.php" enctype="multipart/form-data">
    <div id="dk-order class=" dk-hortz "">
      <div id="inp1">
        <i class="icon fas fa-user"></i>
        <label for="fname" class="label">&nbsp;*Required</label>
        <input name="fname" id="fname" type="text" class="input chkIt" size="30" value="" placeholder="First Name" tabindex="1" />
      </div>
      <div id="inp2">
        <i class="icon fas fa-user"></i>
        <label for="lname" class="label">&nbsp;*Required</label>
        <input name="lname" id="lname" type="text" class="input chksssaIt" size="30" value="" placeholder="Last Name" tabindex="2" />
      </div>
      <div id="inp3">
        <i class="icon fas fa-envelope" style="font-size: 20px;padding-top: 5px"></i>
        <label for="email" class="label">&nbsp;*Required</label>
        <input name="email" id="email" type="text" class="input chkIt" size="30" value="" placeholder="Email Address" tabindex="3" />
      </div>
      <div id="inp4">
        <i class="icon fas fa-phone" style="font-size: 20px;padding-top: 5px;"></i>
        <label for="phone" class="label">&nbsp;</label>
        <input name="phone" id="phone" type="tel" class="input" size="10" placeholder="Phone Number" tabindex="4" />
      </div>
      <div id="inp5">
        <i class="icon fas fa-home" style="font-size: 20px;padding-top: 5px"></i>
        <label for="maddr" class="label">&nbsp;*Required</label>
        <textarea name="maddr" id="maddr" class="input maddr chkIt" cols="60" rows="5" placeholder="Mailing Address" tabindex="5"></textarea>
      </div>

      <div style="left: 50px;top: 300px;position: absolute;width: 400px;height: 150px;">
        <p style="font-size: 10pt;">NOTICE: At present, there is a limit of ten (10) items total per order.</p>
      </div>

      <div style="left: 50px;top: 325px;position: absolute;width: 200px;height: 150px;">
        <input name="whorse" id="whorse" type="number" size="3" class="input product" placeholder="Qty." value="0" tabindex="6">
        <label for="whorse" class="inplab">White Horse</label>
        <a href="img/whorse.jpg" data-lightbox="kratom"><img src="img/whorse-thumb.jpg" style="top: 50px;left:15px;" tabindex="99"></a>
      </div>

      <div style="left: 250px;top: 325px;position: absolute;width: 200px;height: 150px;">
        <input name="wbbee" id="wbbee" type="number" size="3" class="input product" placeholder="Qty." value="0" tabindex="7">
        <label for="wbbee" class="inplab">White Bumblebee</label>
        <a href="img/wbbee.jpg" data-lightbox="kratom"><img src="img/wbbee-thumb.jpg" style="top: 50px;left: 20px;" tabindex="100"></a>
      </div>

      <div style="left: 50px;top: 500px;position: absolute;width: 400px;height: 150px;">
        <input name="agecert" type="checkbox" onclick="chkThis();" style="float: left;height: 20px;width: 25px;border: 1px solid red;" tabindex="8">
        <p style="font-size: 10pt;left: 30px;position: absolute;text-align: justify;">I certify that I am 18 years of age or older and legally able to enter into a contract of purchase and/or other negotiations in the State of Louisiana. I also certify my understanding that the personal information collected from me by Cypress
          Botanicals will be used for the sole and express purpose of order fulfillment and will never be made available to any third parties.</p>
      </div>

      <div name="subres" style="width: 400px;height: 50px;top: 635px;left: 30px;position: relative;border: none;">
        <button name="submit" type="button" onclick="shPop();" id="submit" style="left: 65px;" tabindex="9" disabled="disabled">Review Order</button>
        <button name="reset" type="reset" style="left: 245px;" tabindex="10">Reset Form</button>
      </div>
    </div>
</div>
<div id="myOlay" class="dk-hidden">
  <div id="cbReview" class="dk-center">
    <p>Please review your order information to make sure everything is correct. Orders with incomplete or invalid information will not be processed. Please remember that there is an order limit of ten (10) units TOTAL. Thank you!
    </p>

    <div id="reviewHere" style="width: 75%;top: 125px;left: 25px;"></div>

    <p style="left: 15px;bottom: 15px;"><input type="button" onclick="hdPop()" value="Edit Info" /></p>
  </div>
</div>
</form>