个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 14:40:30 25 4
gpt4 key购买 nike

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

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

如果您想亲自查看，请单击下面的链接，然后单击“提交投诉”按钮。

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

感谢您的帮助!

My project on JSFiddle

这是一个工作片段:

$("#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>

最佳答案

问题是你没有任何 <p></p>围绕你的 DIV 中的文本( #firstDiv 、 #SecondDiv 等)。

这是一个最小的、完整的和可验证的片段，您可以在其中看到使用/不使用 <p></p> 的差异 :

.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 |&nbsp;</p>
  <div id="firstDiv">
    <p>Test 1</p>
  </div>
  <p>&nbsp;| end.</p>
</div>
<br/>
<div class="typewriter">
  <p>Start |&nbsp;</p>
  <div id="firstDiv">Test 2</div>
  <p>&nbsp;| end.</p>

</div>

关于javascript - 文本在输出中垂直上下跳动。使用 "document.getElementById("firstDiv").innerHTML = document.getElementById ("location").value;"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53032850/

25 4 0
文章推荐： html - 如何将 CSS 正确应用到 iFrame？
文章推荐： javascript - jQuery "loading"微调器停止工作
文章推荐： javascript - 修改处理div的宽度
文章推荐： javascript - 如何从外部文件加载着色器？三、文件加载器
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com