Question

当我点击按钮时，我正在尝试激活一些JavaScript。

该操作用于简单计算以显示在文本框中。

这是我到目前为止所得到的，但它目前无效：

function to_mjd() {

  var number;

  number = 5 + 7;

  document.getElementById("mjd").value = number;

}

<input id="mjd" class="textbox2" type="text" name="mjd" placeholder="NNNNN" maxlength="5">

<input type="submit" onclick="to_mjd();" value="CONVERT">

有人能指出我出错的地方吗？

我正在编辑我的原始帖子以添加整个html和javascript代码。希望这会有所帮助。

整个HTML：

<!DOCTYPE html>

<html>

  <head>
    <title>Converter</title>
    <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">
    <!-- <link rel="shortcut icon" href="favicon.ico" > -->
  </head>

  <body>





    <div class="band1">
      <center>
        <h1>CONVERTER</h1>
      </center>
    </div>

    <div id ="band" class="band2">
      <center>
        <form>
          <span class="span1">
            <span class="date">
              Year:<br><br>
              <input class="textbox1" type="text" name="year" placeholder="yyyy" maxlength="4">
            </span>
            <span class="date">
              Month:<br><br>
              <input class="textbox1" type="text" name="month" placeholder="mm" maxlength="2">
            </span>
            <span class="date">
              Day:<br><br>
              <input class="textbox1" type="text" name="day" placeholder="dd" maxlength="2">
            </span>
          </span>
            <span class="span2">
              <input type="button" onclick="to_mjd();" value="CONVERT">
            </span>
          <span class="span3">
            MJD:<br><br>
            <input id="mjd" class="textbox2" type="text" name="mjd" placeholder="NNNNN" maxlength="5">
          </span>
        </form>
      </center>
    </div>

    <script src="https://rawgit.com/bgrins/TinyColor/master/tinycolor.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="scripts.js"></script>
  </body>

</html>

完整的JAVASCRIPT：

$(document).ready(function(){

    var color = '#'+('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6);

    document.getElementById("band").style.background = color;

    var c = tinycolor(color);

    if (c.isDark())
        document.getElementById("band").style.color = "#FFFFFF";
    else
        document.getElementById("band").style.color = "#000000";

    function to_mjd() {

        var number;

        number = 5+7;

        document.getElementById("mjd").value = number;

    }

});

Answer 1

我建议您使用input type='button'替换input type='submit'

Check this

function to_mjd() {

  var number;

  number = 5 + 7;

  document.getElementById("mjd").value = number;

}

<input id="mjd" class="textbox2" type="text" name="mjd" placeholder="NNNNN" maxlength="5">

<input type="button" onclick="to_mjd();" value="CONVERT">

       <!DOCTYPE html>

     <html>

        <head>
   <title>Converter</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://rawgit.com/bgrins/TinyColor/master/tinycolor.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
          $(document).ready(function(){

var color = '#'+('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6);

document.getElementById("band").style.background = color;

var c = tinycolor(color);

if (c.isDark())
    document.getElementById("band").style.color = "#FFFFFF";
else
    document.getElementById("band").style.color = "#000000";    

      });

   function to_mjd() {

    var number;

    number = 5+7;

    document.getElementById("mjd").value = number;

}
</script>
   </head>

    <body>
<div class="band1">
  <center>
    <h1>CONVERTER</h1>
  </center>
</div>

<div id ="band" class="band2">
  <center>
    <form>
      <span class="span1">
        <span class="date">
          Year:<br><br>
          <input class="textbox1" type="text" name="year" placeholder="yyyy" maxlength="4">
        </span>
        <span class="date">
          Month:<br><br>
          <input class="textbox1" type="text" name="month" placeholder="mm" maxlength="2">
        </span>
        <span class="date">
          Day:<br><br>
          <input class="textbox1" type="text" name="day" placeholder="dd" maxlength="2">
        </span>
      </span>
        <span class="span2">
          <input type="button" onclick="to_mjd();" value="CONVERT">
        </span>
      <span class="span3">
        MJD:<br><br>
        <input id="mjd" class="textbox2" type="text" name="mjd" placeholder="NNNNN" maxlength="5">
      </span>
        </form>
        </center>
     </div>    
   </body>

  </html>

Answer 2

to_mjd是一个本地函数，按钮无法看到它。只需更改js文件中的功能位置：

$(document).ready(function(){

        var color = '#'+('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6);

        document.getElementById("band").style.background = color;

        var c = tinycolor(color);

        if (c.isDark())
            document.getElementById("band").style.color = "#FFFFFF";
        else
            document.getElementById("band").style.color = "#000000";

    });


var to_mjd = function() {

   var number;

   number = 5+7;

   document.getElementById("mjd").value = number;

}

Answer 3

如果您尝试添加5 + 7，那么该代码应该有效，但如果您尝试动态获取值，则至少可以选择几条路线。最简单的是：

<input type=text onclick="this.value = eval(this.value)" />

第一次点击将返回undefined。退格并输入5 + 7。再次点击。返回12.

你可以这样详细说明：

<!DOCTYPE html>

<meta name="viewport" content="width=device-width, initial-scale=1">

<body>

<input type=text id=input />
<button type=button onclick='output.value += eval(input.value)+"\n";'> = </button>
<textarea id=output></textarea>

<style>
  body{ width: 99vw; height: 99vh; }
  #input{ width: 90%; }
  #output{ height: 90%;  width: 99%; }
</style>

<script>
  var input = document.getElementById('input');
  var output = document.getElementById('output');
</script>

</body>

JavaScript可以在单击按钮时执行简单计算，并将结果放在文本框中

3 个答案: