Question

我在网站上查了一个问题（How to display javascript variables in a html page without document.write）

但是当我在自己的编码程序中执行它时，它不起作用。希望你能帮忙！

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset ="UTF-8">
  <meta name="viewport" content="width=device-width">

  <style type="text/css">
  html {
    font-family: sans-serif;
    font-size: 16px;
  }

  h1 {
    margin: 1em 0 0.25em 0;
  }

  input[type=text] {
    padding: 0.5em;
  }

  .jsValue, .jqValue {
    color: red;
  }
  </style>



</head>
<body>
  <!-- This <input> field is where I'm getting the name from -->
  <label>Enter your name: <input class="name" type="text" value="World"/></label>

  <!-- Plain Javascript Example -->
  <h1>Plain Javascript Example</h1>Hello <span class="jsValue">World</span>

  <!-- jQuery Example -->
  <h1>jQuery Example</h1>Hello <span class="jqValue">World</span>

  <script>
  //https://stackoverflow.com/questions/9689109/how-to-display-javascript-variables-in-a-html-page-without-document-write
  // Plain Javascript Example
  var $jsName = document.querySelector('.name');
  var $jsValue = document.querySelector('.jsValue');

  $jsName.addEventListener('input', function(event)){
    $jsValue.innerHTML = $jsName.value;
  }, false);

  </script>

</body>
</html>

Answer 1

因为您有语法错误..请检查控制台。

正确的代码应该是：

    <div class="paragraph-block">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="highlighted">Pellentesque</span> vitae justo et sapien ultrices bibendum eget pretium risus. Curabitur tincidunt egestas mauris nec tempus. Vivamus auctor rhoncus sem a ornare. Fusce porttitor id mi sagittis malesuada. Etiam iaculis urna at sem pulvinar, in mattis libero facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin egestas convallis porttitor. Fusce eget mauris lacus. Duis pellentesque dolor sed ex venenatis, et dictum mi tincidunt. Vivamus aliquam, felis quis semper pulvinar, felis elit mattis quam, vel imperdiet eros mi in tellus.</p>
    </div>
    <div class="paragraph-block">
        <p>Donec erat arcu, sagittis eu ullamcorper eget, interdum et dui. Duis <span class="highlighted medium">vulputate</span> ligula vitae sagittis malesuada. Nulla facilisi. Integer quis urna vel ligula convallis placerat ut vel ipsum. Aenean pellentesque ante et augue dictum iaculis. Pellentesque quis odio vitae nibh sodales ultrices ut ac risus. Cras congue pulvinar enim, nec tincidunt nisi. Pellentesque neque lorem, iaculis non purus varius, varius pharetra quam. Vivamus sed lobortis diam, id vestibulum velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam aliquet, leo a sollicitudin porttitor, quam enim pellentesque magna, vitae rutrum enim tellus et mi. Cras ornare congue ligula sed porttitor. Sed eget viverra nisl.</p>
    </div>
    <div class="paragraph-block">
        <p>Sed efficitur sodales velit, vel dignissim dolor ullamcorper id. <span class="highlighted large">Quisque quis quam eget ligula</span> tincidunt ornare fermentum sed nulla. Suspendisse placerat, purus sed consectetur pharetra, orci tortor consectetur lorem, eget feugiat quam metus eu nisi. Nulla arcu nulla, imperdiet ut venenatis eu, aliquet vitae libero. Phasellus sed consequat dolor. Sed accumsan purus non arcu dictum semper. Praesent ac ultricies metus. Donec sit amet nulla a neque ullamcorper facilisis porttitor gravida ligula. Donec eleifend id lorem nec auctor. Aliquam laoreet vulputate venenatis. Vivamus eget pulvinar lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut consectetur nibh massa, non aliquam orci rhoncus in. Vestibulum id nibh non sem aliquet imperdiet non sed elit. Morbi hendrerit ut orci a faucibus. Quisque nulla massa, lobortis pellentesque nulla vestibulum, elementum gravida dolor.</p>
    </div>

如何显示javascript变量

1 个答案: