文本在输出中垂直上下跳动。使用 "document.getElementById("firstDiv").innerHTML = document.getElementById("location").value;"

Question

我真的不知道如何描述我的问题，但基本上：

为了好玩，我在 JSFiddle 中编写了一个项目，不知何故我的代码输出只是上下跳动。

如果您想自己看一下，请单击下面的 link，然后单击 "Submit Complaint" 按钮。

问题是：在输出的文本中，一些变量和文本高于周围的所有文本。我不知道为什么。

感谢您的帮助！

这是一个工作片段：

$("#textChanger").click(function() { 
              
 var el     = $("#alarmcard"),  
     newone = el.clone(true);
           
 el.before(newone);
        
 $("." + el.attr("class") + ":last").remove();

});

$("input:checkbox").on('click', function() {
  // in the handler, 'this' refers to the box clicked on
  var $box = $(this);
  if ($box.is(":checked")) {
    // the name of the box is retrieved using the .attr() method
    // as it is assumed and expected to be immutable
    var group = "input:checkbox[name='" + $box.attr("name") + "']";
    // the checked state of the group/box on the other hand will change
    // and the current value is retrieved using .prop() method
    $(group).prop("checked", false);
    $box.prop("checked", true);
  } else {
    $box.prop("checked", false);
  }
});

.fieldset {
  visibility:hidden;
}

.typewriter {
  vertical-align: baseline;
  display: flex;
  color: black;
  font-family: monospace;
  overflow: hidden;
  /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange;
  /* The typwriter cursor */
  white-space: nowrap;
  /* Keeps the content on a single line */
  margin: 0 auto;
  /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em;
  /* Adjust as needed */
  animation: typing 3.5s steps(30, end), blink-caret .5s step-end infinite;
}

/* The typing effect */

@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}

/* The typewriter cursor effect */

@keyframes blink-caret {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: orange
  }
}

<!DOCTYPE HTML>
<html lang="en">

  <head>

    <title>Telephone Alarm Card</title>
    <meta charset="UTF-8" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

  </head>

  <body>
    <h1>Telephone Alarm Card</h1>
    <form>
      <fieldset>
        <legend>Submission</legend>
        <p>
          <label>Location in House</label>
          <input type="text" id="location" placeholder="Attic" />
        </p>
        <p>
          <label>Address of House</label>
          <input type="text" id="address" placeholder="11 No. Elm, City" />
        </p>
        <p>
          <label>Name of Suspect</label>
          <input type="text" id="nameofsus" placeholder="Mrs. Blake" />
        </p>

        <p>
          <label>Name or Initials of Submiter</label>
          <input type="text" id="nameofsub" placeholder="E.B." />

          <br>
          <br>

          <label><input type="checkbox" id = "male" name="fooby[1][]" />Male</label>

          <label><input type="checkbox" id = "female" name="fooby[1][]" />Female</label>

          <br>
          <br>

          <input type="button" value="Submit Complaint" id="textChanger" />
      </fieldset>

      <br>
      <br>
      
      <div id="fieldset" class="fieldset">
      <fieldset>

        <legend>Firemen's Alarm Card</legend>

        <br>

        <div id="alarmcard" class="typewriter">
          <p>Have reason to suspect&nbsp;</p>

          <div id="firstDiv">
            <p>attic</p>
          </div>

          <p>;&nbsp;</p>

          <div id="secondDiv">
            <p>11 No. Elm, City</p>
          </div>

          <p>.&nbsp;---&nbsp;</p>

          <div id="thirdDiv">
            <p>E.B</p>
          </div>

          <p>;&nbsp;Name is&nbsp;</p>

          <div id="fourthDiv">
            <p>Elise Larsson</p>
          </div>

          <p>;&nbsp;</p>

          <div id="fifthDiv">
            <p>Female</p>
          </div>

        </div>

        <script>
          document.getElementById("textChanger").onclick = function() {
          
          document.getElementById("fieldset").style.visibility = "visible";

            if (document.getElementById("location").value != "") {
              document.getElementById("firstDiv").innerHTML = document.getElementById("location").value;
            } else {
             document.getElementById("firstDiv").innerHTML = "attic";
            }

            if (document.getElementById("address").value != "") {
              document.getElementById("secondDiv").innerHTML = document.getElementById("address").value;
            } else {
             document.getElementById("secondDiv").innerHTML = "11 No. Elm, City";
            }

            if (document.getElementById("nameofsub").value != "") {
              document.getElementById("thirdDiv").innerHTML = document.getElementById("nameofsub").value;
            } else {
             document.getElementById("thirdDiv").innerHTML = "Mrs. Blake";
            }

            if (document.getElementById("nameofsus").value != "") {
              document.getElementById("fourthDiv").innerHTML = document.getElementById("nameofsus").value;
            } else {
             document.getElementById("fourthDiv").innerHTML = "E.B.";
            }

            if (document.getElementById("male").checked == true) {
              document.getElementById("fifthDiv").innerHTML = "Male";
            } else if (document.getElementById("female").checked == true) {
              document.getElementById("fifthDiv").innerHTML = "Female";
            }
          }

        </script>

        <br>

      </fieldset>
      </div>
    </form>
  </body>

</html>

Answer 1

问题是您的 DIV 中的文本周围没有任何 <p></p>（#firstDiv、#SecondDiv 等）。

这是一个最小的、完整的、可验证的片段，您可以在其中看到with/without[=12]之间的区别=]：

.typewriter { vertical-align: baseline; display: flex; color: black; font-family: monospace; overflow: hidden; /* Ensures the content is not revealed until the animation */ border-right: .15em solid orange; /* The typwriter cursor */ white-space: nowrap; /* Keeps the content on a single line */ margin: 0 auto; /* Gives that scrolling effect as the typing happens */ letter-spacing: .15em; /* Adjust as needed */ animation: typing 3.5s steps(30, end), blink-caret .5s step-end infinite; }

<div class="typewriter"> <p>Start | </p> <div id="firstDiv"> <p>Test 1</p> </div> <p> | end.</p> </div> <br/> <div class="typewriter"> <p>Start | </p> <div id="firstDiv">Test 2</div> <p> | end.</p> </div>

文本在输出中垂直上下跳动。使用 "document.getElementById("firstDiv").innerHTML = document.getElementById("location").value;"

Text vertically jump up and down in output. Uses "document.getElementById("firstDiv").innerHTML = document.getElementById("location").value;"

html

javascript

css

jsfiddle

codepen