How do you set a permanent value in jQuery

Question

I want to set a permanent value to a div element with jQuery;

the full js file:

$(function () {
    var $a;
    var $b;
    $('button').click(function () {
        $a = $('#a').val();
        $b = $('#b').val();

        var $big = getBigger($b, $a);
        var $small = getSmaller($b, $a);
        $('#bigger').text($big);
        $('#smaller').text($small);
    });


 });


//a simple function for getting a bigger element
function getBigger(a, b) {
    return a ^ (a ^ b) & -(a < b);
}

//a simple function for getting a smaller element
function getSmaller(a, b) {
    return (a < b) ? a : b;
}

the full html file:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="style/style.css">
    <title>Compare</title>
</head>
<body>
    <form>
        Enter a: <input type="number" id="a"><br/>
        Enter b: <input type="number" id="b"><br/> 
        <button> Compare</button> 
        <div id="bigger"></div> 
        <div id="smaller"> </div>
    </form>


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

The problem is that when I leave the scope the variable gets destroyed

PS. Now I realise that my mistake is that when a <button> is added in a form element, everytime the button is pressed, the data in the form gets reseted

The variable `$big` is unbound in your code. Also, when you set the text of an element, that text remains even when the original variables go out of scope. Something else is happening in your case. — Frédéric Hamidi, Oct 21 '15 at 14:52
if by unbound you mean undeclared, I had it declared in the beginning of the file and when the .text() method is set out of this scope, i receive a permanent value. — murloc, Oct 21 '15 at 14:56
Looks like something else is overwriting the div's text after your click handler has run. Can you reproduce the problem in an [MCVE](http://stackoverflow.com/help/mcve)? — Frédéric Hamidi, Oct 21 '15 at 14:58
I have edited the question, this is the full js code that I have(except the getSmaller and getBigger() methods). — murloc, Oct 21 '15 at 15:07
It's still far from an MCVE. In order to reproduce your problem, we would need your HTML markup and possibly the code for `getBigger()` and `getSmaller()`, if these functions are part of the problem. You should aim to provide the smallest amount of code that manifests the issue, as explained in the link in my previous comment. — Frédéric Hamidi, Oct 21 '15 at 15:10

score 2 · Answer 1 · edited May 23 '17 at 12:33

When you run code within a function it creates a scope. Each variable you define using the var statement will be available only in that scope.

To create a variable for usage outside of the current scope, either declare a variable without putting var beforehand or directly write window.varname = value. Have another read on that topic.

Besides that, in your code $('#bigger').text($big); the var $big never even gets defined, so maybe that is the problem.

And setting an elements text works independent from scopes or variables.

score -2 · Answer 2 · answered Oct 21 '15 at 14:53

Try this

To Access:

$("#a").data('value');

To Set

$("#a").data('value' , 'whatevervalue');

To Access Without JQuery:

document.getElementById("a").dataset.value;

To Set Without JQuery;

document.getElementById("a").dataset.value = "Some Value";

A Div cannot hold the Value attribute unless you use:

document.getElementById("a").setAttribute("value" , "val");

Then to Assign it to Inside your div:

$("#myDivElement").html($("#a").data('value'))

How do you set a permanent value in jQuery

2 Answers2