Question

我有一个ID为input的输入。我有不同的功能来计算js中的sin，cos和tan。我尝试了这一点，使它工作顺利。

function sin() {
    var value = document.getElementById('input').value;
    sine = Math.sin(value);
    document.getElementById('answers').value= sine;}
    
function cos() {
    var value = document.getElementById('input').value;
    cose = Math.cos(value);
    document.getElementById('answers').value = cose;
}
function tan() {
    var value = document.getElementById('input').value;
    tang = Math.tan(value);
    document.getElementById('answers').value = tang;
}

<input type="text" id="input"/>
<button onclick="sin()">Sin</button>
<button onclick="sin()">cos</button>
<button onclick="sin()">tan</button>
<input id="answers"/>

当我尝试使代码变小时，它不起作用。

var value = document.getElementById('input').value;
function sin() {   
    sine = Math.sin(value);
    document.getElementById('answers').value= sine;}
    
function cos() {
    cose = Math.cos(value);
    document.getElementById('answers').value = cose;
}
function tan() {
    tang = Math.tan(value);
    document.getElementById('answers').value = tang;
}

<input type="text" id="input"/>
<button onclick="sin()">Sin</button>
<button onclick="sin()">cos</button>
<button onclick="sin()">tan</button>
<input id="answers"/>

任何建议都应该有帮助

Answer 1

您正在加载时立即获得输入的值，并且只有一次。单击按钮时需要获取值。我可能会将“获取值”放入函数中，并在各种计算函数中调用它。另外，我可能会使其成为单个 calc函数，并带有一个开关来确定应该执行的计算。

这感觉很干。

如果需要，可以通过使用JavaScript event binding而不是将onclick事件硬编码到每个元素中来进一步改善。

// single function, accepts a "type" argument
function calc(type) {
  // get the value of the input when the button is clicked
  const value = document.getElementById('input').value;
  // declare the result
  let result = 0;
  switch (type) {
    case 'sin':
      result = Math.sin(value);
      break;
    case 'cos':
      result = Math.cos(value);
      break;
    case 'tan':
      result = Math.tan(value);
      break;
    default:
      break;
  }

  // show the result in the input
  document.getElementById('answers').value = result;
}

<input type="text" id="input" />
<button onclick="calc('sin')">Sin</button>
<button onclick="calc('cos')">cos</button>
<button onclick="calc('tan')">tan</button>
<input id="answers" />

Answer 2

为什么会这样？这是因为优先加载DOM，首先是加载javascript文件，然后没有找到任何input标记，因为它将随后加载。

创建function时，它会添加到window对象中，并且在您单击标记时单击它时，因为已加载DOM，则可以访问它的值。

要访问正确的结果，可以使用以下波纹管之一。

1）如果将所有javascript放入此结构，它将起作用。

window.onload = function(){
  //Your code
}

2）如果您将script标签的input标签放在下面

函数外部无法获取Javascript中的输入值

2 个答案: