Как использовать глобальную переменную внутри функции в javascript?

Я хочу использовать глобальные переменные x, y 'в приведенной ниже функции.Как использовать глобальную переменную внутри функции в javascript?

это работает, когда я ставлю переменные внутри функции

<html> 
<head> 
<meta charset="utf-8"> 
<title></title> 
<script type="text/javascript"> 

    var x = document.getElementById('field_one').value 
    var y = document.getElementById('field_two').value 

    function calculator() 
     { 
      var p = x * y; 
      alert(x + " times " + y + " is " + p); //shows undefined times undefined is NaN 
     } // calculator() 


</script> 
</head> 

<body> 
<p>This is a simple calculator.</p> 
<form name="the_form"> 
     Number 1: <input type="text" value="" id="field_one"/> <br /> 
     Number 2: <input type="text" value="" id="field_two"/> <br /> 
<input type="button" value="multiply them!" onclick="javascript:calculator()"/> 
</form> 
</body> 
</html>

источник

2016-09-24 Omar

* "Я хочу использовать глобальные переменные ..." * <- почему ...... правильная вещь будет получить элементы ** внутри ** функции, когда они действительно доступны, так что у вас уже есть ответ на этот вопрос? Если это все равно не для вас, переместите скрипт вправо до ''. – adeneo

Вы правы, но я тоже хочу использовать переменные в других функциях, так что мне не нужно снова объявлять переменные. – Omar

Затем вы перемещаете скрипт после элементов, которые вы пытаетесь получить, поэтому их можно получить а не просто вернуть 'null' – adeneo

Ваш код работает. Но ты бегаешь в гонке. Вы пытаетесь найти элементы, прежде чем они будут созданы:

var x, y; 
window.onload = function() { 
    x = document.getElementById().value; 
    y = document.getElementById().value; 
}

Если ваш сайт загружается в течение длительного времени, пользователь может попытаться запустить скрипт калькулятора, прежде чем х и у установлены. Решение:

var x, y, calculator; 
calculator = function() { 
    alert("please wait, until the site is completely loaded"); 
}; 
window.onload = function() { 
    x = document.getElementById().value; 
    y = document.getElementById().value; 
    calculator = function() { 
     alert(x + " times " + y + " is " + x * y); 
    }; 
}

источник

2016-09-24 15:34:21

Проблема заключается в том, что вы хотите получить значение x и y, но они не являются установленным значением при вызове функции. Если вы хотите использовать переменные много раз, вам нужно создать функцию (я вызвал setValues ), которая отвечает за установление значения x и y со значением ввода, и всегда вам нужно получить значения ввода вы можете это назвать. Что-то вроде этого:

var x; 
 
var y; 
 

 
function setValues() { 
 
    x = document.getElementById('field_one').value; 
 
    y = document.getElementById('field_two').value; 
 
} 
 

 
document.getElementById("calc").addEventListener("click", function() { 
 
    setValues(); 
 
    var p = x * y; 
 
    alert(x + " times " + y + " is " + p); 
 
}, false);

<p>This is a simple calculator.</p> 
 
<form name="the_form"> 
 
     Number 1: <input type="text" value="" id="field_one"/> <br /> 
 
     Number 2: <input type="text" value="" id="field_two"/> <br /> 
 
<input type="button" id="calc" value="multiply them!" /> 
 
</form>

источник

2016-09-24 16:04:24

Positioning сценарий после .html контента гарантирует все определяется в момент вы хотите, чтобы скрипт работал.
Вы можете объявлять глобальные переменные из локальной области, просто не используя 'var' при объявлении.
Не забудьте закончить каждое утверждение символом ';'

Таким образом, ваш код 100% функционально:

<html> 
<head> 
<meta charset="utf-8"> 
<title></title> 

</head> 

<body> 
<p>This is a simple calculator.</p> 
<form name="the_form"> 
     Number 1: <input type="text" id="field_one"/> <br/> 
     Number 2: <input type="text" id="field_two"/> <br/> 
<input type="button" value="multiply them!" onclick="readFields();"/> 
    <script type="text/javascript"> 

     function readFields(){ 
    x = document.getElementById('field_one').value; 
    y = document.getElementById('field_two').value; 
      calculator(); 
     } 

    function calculator(){ 

      var p = x * y; 
      alert(x + " times " + y + " is " + p); //shows undefined times undefined is NaN 
     } // calculator() 


</script> 
</form> 
</body> 
</html>

источник

2016-09-24 16:08:14 adr1Script

Что делать, если я хочу добавить еще одну кнопку для деления и сделать еще одну функцию, например функцию для умножения и одну для деления, как мне это сделать что! – Omar

Существует множество учебных пособий по разработке калькулятора. – adr1Script

Как использовать глобальную переменную внутри функции в javascript?

ответ

Смежные вопросы