为什么我的变量不会加起来？

时间：2017-08-06 16:42:22

标签： javascript html calculator webpage

编辑：我设法解决了这个问题。这是新代码： 

<body>
<script type="text/javascript">


function get(){};
function add(){
var ff= Number(document.getElementById("fn").value);
var ll= Number(document.getElementById("ln").value);
var gg= ff + ll

document.getElementById("fn").value = "";
document.getElementById("ln").value = "";
document.getElementById("rslt").value = gg};
</script>
<h1>Calculator</h1>


<article id="a1">
<input id="fn" type="number" placeholder="first number" style="display:inline">

<span id="mark">MARK</span>

<input id="ln" type="number" placeholder="last number" style="display:inline">

<span>=</span>

<input id="rslt" type="number" placeholder="result" style="display:inline">

<button type="button" onclick="add();"> + </button>
<button type="button"> - </button>
<button type="button"> X </button>
<button type="button"> % </button>
</article>

<p id="hint">This is a paragraph.</p>



</body>

PS：感谢您的所有答案和评论。

  

我不知道为什么我的变量“ff”和“ll”不会在这个页面中加起来？   有什么问题？我试图创造一些东西   计算器，目前正在编程ADD功能。但是当我   在两个字段中输入数字并按ADD它无法正确添加。一世   在没有所有其他代码的情况下单独尝试相同的方法并且它有效。

     

如果我未能将部分包含在哪里，那么这是所有页面代码   问题在于：

 <!DOCTYPE html>
    <html>
    <head>
 </head>
    <body>

    <article>
    <h1>Calculator</h1>
    <input id="fn" type="real" placeholder="first number"></input> 
    <span id="mark"> + </span>
    <input id="ln" type="real" placeholder="last number"></input>
    <span id="e"> = </span>
    <input id="re" type="real" value="0" placeholder="result"></input>
    <br /> <br />
    <table>
    <th><button type=button onclick="add()">add +</button></th>
    <th><button type=button onclick="subtract()">subtract -</button></th>
    <th><button type=button onclick="devide()">devide %</button></th>
    <th><button type=button onclick="multiply()">multiply *</button></th>
    <th><button type=button onclick="clea()">clear</button></th>


    </article>


    <script>
    //setting up variables
    var cc="+"
    //setting up functions

    //get function
    function get(){
    var ff=document.getElementById("fn").value
    var ll= document.getElementById("ln").value
    }
    //add function
    function add() {get();cc="+";
    if (cc=="+"){
    document.getElementById("hint").innerHTML = "ADD";

    document.getElementById("re").value =ff+ll;
    alert(ff)
    }} 
    //subtract function
    function subtract() {get(); cc="-"
    if (cc=="-"){document.getElementById("hint").innerHTML = "SUBTRACT"}
    }
    //devide function
    function devide() {get();cc="%"
    if (cc=="%"){document.getElementById("hint").innerHTML = "DEVIDE"}
    }
    //multiply function
    function multiply() {get();cc="*"
    if (cc=="*"){
    document.getElementById("hint").innerHTML = "MULTIPLY"}
    }
    //clear function 
    function clea() {
    document.getElementById("hint").innerHTML = "CLEAR"
    document.getElementById("re").value =""}
    </script>

    <p id="hint" style="background-color:yellow; display:inline"></p>
    </body>
    </html>

5 个答案:

答案 0 :(得分：0)

我在这里看到几个问题：

1）您在get()中创建的变量只能在该函数的范围内访问。如果要在其他函数中查看结果，则必须首先在get函数之外声明它们：

//setting up variables
var cc="+";
var ll;
var ff;
//setting up functions

function add() {get();cc="+";
    if (cc=="+"){
    document.getElementById("hint").innerHTML = "ADD";

    document.getElementById("re").value ="";
    alert(ff)
}}

2）你实际上并没有在我的代码中看到的任何地方添加或减去。您只需清除re元素（document.getElementById("re").value ="";）的值，然后提醒ff元素（alert(ff)）中的值

答案 1 :(得分：0)

"real"不是type元素的有效<input>，它也是自动关闭的</input>是无效的HTML;将type设置为"number"并使用.valueAsNumber获取as数字的值，而不是字符串。

在HTML中包含缺少结束</table>标记。

ff和ll是get函数中的局部变量。将变量设置为每个函数的全局变量，以便能够访问这些值。

您还可以将#mark .textContent设置为相应函数调用中的当前数学运算。

JavaScript上的JavaScript实际上并没有执行任何数学计算。

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <article>
    <h1>Calculator</h1>
    <input id="fn" type="number" placeholder="first number">
    <span id="mark"> + </span>
    <input id="ln" type="number" placeholder="last number">
    <span id="e"> = </span>
    <input id="re" type="number" value="0" placeholder="result">
    <br /> <br />
    <table>
      <th><button type=button onclick="add()">add +</button></th>
      <th><button type=button onclick="subtract()">subtract -</button></th>
      <th><button type=button onclick="devide()">devide /</button></th>
      <th><button type=button onclick="multiply()">multiply *</button></th>
      <th><button type=button onclick="clear()">clear</button></th>
    </table>
  </article>

  <p id="hint" style="background-color:yellow; display:inline"></p>
  <script>
    //setting up variables
    var cc = "+",
      ff, ll;
    //setting up functions
    var fn = document.getElementById("fn");
    var ln = document.getElementById("ln");
    var mark = document.getElementById("mark");
    var re = document.getElementById("re");
    var hint = document.getElementById("hint");

    function log() {
      console.log(re.value);
    }
    //get function
    function get() {
      ff = fn.valueAsNumber;
      ll = ln.valueAsNumber;
    }
    //add function
    function add() {
      get();
      cc = "+";
      hint.innerHTML = "ADD";
      mark.textContent = " " + cc + " ";
      // do the math here
      re.value = ff + ll;
      log();
    }
    //subtract function
    function subtract() {
      get();
      cc = "-";
      hint.innerHTML = "SUBTRACT";
      mark.textContent = " " + cc + " ";
      re.value = ff - ll;
      log();
    }
    //devide function
    function devide() {
      get();
      cc = "/";
      hint.innerHTML = "DEVIDE";
      mark.textContent = " " + cc + " ";
      re.value = ff / ll;
      log();
    }
    //multiply function
    function multiply() {
      get();
      cc = "*"
      hint.innerHTML = "MULTIPLY";
      mark.textContent = " " + cc + " ";
      re.value = ff * ll;
      log();
    }
    //clear function 
    function clear() {
      hint.innerHTML = "CLEAR"
      re.value = fn.value = ln.value = "";
    }
  </script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

当你使用

时，你需要知道你会得到一个字符串 
document.getElementById("fn").value

因此，在添加变量ff和ll之前，请确保将它们转换为float（或int）。你可以做点什么

re = parseFloat(ff) + parseFloat(ll);

或

re=ff - (-ll);

在第二个示例中，转换是隐式完成的，因为-运算符需要数字参数。使用+运算符只会连接两个字符串值。

答案 3 :(得分：0)

以下是修复添加功能的JSFiddle示例。

function add() {
  var fn = document.getElementById("fn").value
  var ln = document.getElementById("ln").value
  document.getElementById("re").value = new Number(fn) + new Number(ln);
}

答案 4 :(得分：0)

你不需要

if (cc=="..."){
...
}

就像写

一样 
function add() {
  get();
  cc=="..."
  document.getElementById("hint").innerHTML = "ADD";
  document.getElementById("re").value = ff + ll;
  mark.innerHTML = cc;
}

试试吧

<!DOCTYPE html>
<html>

<head>
</head>
<body>
  <article>
    <h1>Calculator</h1>
    <input id="fn" type="number" placeholder="first number">
    <span id="mark"> + </span>
    <input id="ln" type="number" placeholder="last number">
    <span id="e"> = </span>
    <input id="re" type="number" value="0" placeholder="result">
    <br /> <br />
    <table>
      <th><button type=button onclick="add()">add +</button></th>
      <th><button type=button onclick="subtract()">subtract -</button></th>
      <th><button type=button onclick="devide()">devide /</button></th>
      <th><button type=button onclick="multiply()">multiply *</button></th>
      <th><button type=button onclick="clea()">clear</button></th>
    </table>
  </article>

  <script>
    //setting up variables
    var cc = "+", ff, ll;
    //setting up functions
    var mark = document.getElementById("mark");
    
    //get function
    function get() {
      ff = parseFloat(document.getElementById("fn").value);
      ll = parseFloat(document.getElementById("ln").value);
    }
    //add function
    function add() {
      get();
      cc = "+";
      document.getElementById("hint").innerHTML = "ADD";
      document.getElementById("re").value = ff + ll;
      mark.innerHTML = cc;
    }
    //subtract function
    function subtract() {
      get();
      cc = "-";
      document.getElementById("hint").innerHTML = "SUBTRACT";
      document.getElementById("re").value = ff - ll;
      mark.innerHTML = cc;
    }
    //devide function
    function devide() {
      get();
      cc = "/";
      document.getElementById("hint").innerHTML = "DEVIDE";
      document.getElementById("re").value = ff / ll;
      mark.innerHTML = cc;
    }
    //multiply function
    function multiply() {
      get();
      cc = "*";
      document.getElementById("hint").innerHTML = "MULTIPLY";
      document.getElementById("re").value = ff * ll;
      mark.innerHTML = cc;
    }
    //clear function 
    function clea() {
      document.getElementById("hint").innerHTML = "CLEAR"
      document.getElementById("re").value = ""
    }
  </script>

  <p id="hint" style="background-color:yellow; display:inline"></p>
</body>

</html>

相关问题
最新问题