时间戳

首页 > 解决方案 > HTML/CSS/Javascript 函数创建

javascript - HTML/CSS/Javascript 函数创建

问题描述

我正在制作一个可以转换您的号码的网站。我已经有了大部分代码，我只是遇到了一个错误，无法弄清楚。当我运行它时，页面上有代码，当我单击按钮时，它不会运行。

<div id = "conversion">
function feet() {
  var userinches = document.getElementById('userinches').value;
  doOuput('The answer is', userinches / 0.0833, ' ft');
}

function doOuput(val, unit) {
  //console.log('Convert To ' + unit);
  document.getElementById('results').innerHTML = val + unit;
}
</div><!-- End of conversion div section -->

标签： javascripthtmlcss

解决方案

您需要将javascript放在script标签中。最好将它们与html文件完全分开并将其写入单独的js文件中。在 html 中包含该 js 文件

<div id="question">
  <h2>Unit Convertor</h2>
  <img src="" alt="Picture of basketball">
  <p>Enter a Quanity of Inches: <input id="userinches" type="number" /> </p>
</div>

<div id="conversion">
  <script>
    function feet() {
      var userinches = document.getElementById('userinches').value;
      doOuput('The answer is', userinches / 0.0833, ' ft');
    }

    function cm() {
      var userinches = document.getElementById('userinches').value;
      doOuput('The answer is', userinches * 2.54, ' cm');
    }

    function yards() {
      var userinches = document.getElementById('userinches').value;
      doOuput('The answer is', userinches / 0.02778, ' yard');
    }

    function doOuput(val, unit) {
      //console.log('Convert To ' + unit);
      document.getElementById('results').innerHTML = val + unit;
    }
  </script>
</div>

<div="buttons">
  <button type="button" onclick="feet();">Feet</button>
  <button type="button" onclick="cm();">Centimeters</button>
  <button type="button" onclick="yards();">Yards</button>
  </div>
  <!-- End of buttons div section -->

  <div id="results"></div>

推荐阅读