设置一个等于多个名称的变量

时间:2019-06-26 18:56:35

标签: javascript html

所以我对Java脚本很陌生;我正努力学习它,但是这对我来说很困难,尤其是因为我是从OOP的角度来看(C ++ / Java)。无论如何,我正在构建一个计算器,我的问题是我试图将单个全局变量设置为长引用。这就是我的意思。

这是我试图使单个全局变量工作而不是每次都编写(document.form.textview.value)的尝试。

1. var number = document.form.textview.value;

2. var number = newFunction();
    function newFunction() {
    return document.form.textview.value;
    }


3. i also tried using document.getelementbyID and queryselector but none of them worked. 

我所拥有并且正在工作:-

function insert(num) { // inserts a number into the textbox or form
    document.form.textview.value = document.form.textview.value + num;
}

function equal() { // calculates numbers
    var exp = document.form.textview.value;
    if (exp) {
        document.form.textview.value = eval(exp);
    }
}

function Squareroot() {
    document.form.textview.value = 
    eval(Math.sqrt(document.form.textview.value));
}

如您所见,我必须每次都写“ document.form.textview.value”才能使其正常工作,我希望有一个全局变量为我做这件事。

这就是我想要的:-

var number = document.form.textview.value;

function insert(num) {
    return number+num;
}

function equal() {
    if (number) {
       eval(number);
    }
}

function Squareroot() {
    eval(Math.sqrt(number));
}

html:-

 <form name="form">
        <input class="textview" name="textview">
        <table>
            <caption>
                <h1>↻</h1>
            </caption>
            <tr>
                <td onclick="Clearview()">C</td>
                <td>←</td>
                <td onclick="Takepercentage('')">%</td>
                <td onclick="insert('/')">/</td>
            </tr>
            <tr>
                <td onclick="insert('.')">.</td>
                <td onclick="exponents()">x<sup>2</sup></td>
                <td onclick="Squareroot()">√</td>
                <td onclick="insert('*')">*</td>
            </tr>
            <tr>
                <td onclick="insert(6)">6</td>
                <td onclick="insert(7)">7</td>
                <td onclick="insert(8)">8</td>
                <td onclick="insert('-')">-</td>
            </tr>
            <tr>
                <td onclick="insert(3)">3</td>
                <td onclick="insert(4)">4</td>
                <td onclick="insert(5)">5</td>
                <td onclick="insert('+')">+</td>
            </tr>

            <tr>
                <td onclick="insert(0)">0</td>
                <td onclick="insert(1)">1</td>
                <td onclick="insert(2)">2</td>
                <td onclick="equal()">=</td>
            </tr>
        </table>
    </form>

3 个答案:

答案 0 :(得分:0)

您可以使用onkeyup事件监听器来更新全局变量。这样一来,只要您想引用globalVal,就可以得到正确的值。这也称为单向绑定。也就是说,无论何时更改输入值,全局变量都会得到更新,但反之则不会。在双向绑定中,对全局变量或输入所做的更改将导致它们都被更新。

var globalVal = "";
function update(val) {
  globalVal = val;
  console.log(globalVal);
}
<input id="textview" onkeyup="update(this.value)" class="textview" name="textview">

答案 1 :(得分:0)

DOM非常类似于您可能熟悉的任何其他OOP系统。您可以很容易地引用document.form.textview,作为您可以通过访问或更改其value属性来更改的对象。但是,如果您创建对该属性的引用,则获取或设置该属性只会更改引用,而不更改基础对象。

认为它类似于

var r = new Rectangle(5, 3);
r.area() //=> 15
r.width  //=> 5
r.width + 7 //=> 12, but doesn't change the rectangle.

因此,通过在希望使用number.value的地方使用number并将number设置为document.form.textview,您应该可以使事情正常进行。

const number = document.form.textview;

function insert(num) {
    return number.value += '' + num;
}

function equal() {
    if (number.value) {
       eval (`number.value = ${number.value}`);
    }
}

function Squareroot() {
    number.value = Math.sqrt(number.value);
}
<form name="form">
        <input class="textview" name="textview">
        <table>
            <caption>
                <h1>↻</h1>
            </caption>
            <tr>
                <td onclick="Clearview()">C</td>
                <td>←</td>
                <td onclick="Takepercentage('')">%</td>
                <td onclick="insert('/')">/</td>
            </tr>
            <tr>
                <td onclick="insert('.')">.</td>
                <td onclick="exponents()">x<sup>2</sup></td>
                <td onclick="Squareroot()">√</td>
                <td onclick="insert('*')">*</td>
            </tr>
            <tr>
                <td onclick="insert(6)">6</td>
                <td onclick="insert(7)">7</td>
                <td onclick="insert(8)">8</td>
                <td onclick="insert('-')">-</td>
            </tr>
            <tr>
                <td onclick="insert(3)">3</td>
                <td onclick="insert(4)">4</td>
                <td onclick="insert(5)">5</td>
                <td onclick="insert('+')">+</td>
            </tr>

            <tr>
                <td onclick="insert(0)">0</td>
                <td onclick="insert(1)">1</td>
                <td onclick="insert(2)">2</td>
                <td onclick="equal()">=</td>
            </tr>
        </table>
    </form>

答案 2 :(得分:-1)

您编写的代码是正确的,您只应确保在所有页面之后,debody结束标记之前导入脚本。 或者,您可以使用     var number;     window.onload = function(){number = document.form.textview.value; } 然后照常使用