changing js variables which are parameters in a function?

Question

I want to have multiple buttons use the same function. Here What I'm trying to do.

<button><a herf="#" onClick="myFunction('clk1',c1);">button</a></button>
<p id="clk1"></p>

With the buttons I want to change the variable and change the paragraph

<script>
    var c1 = 0;
    function myFunction(paragraph,varibl) {
            varibl += 1;
            document.getElementById(paragraph).innerHTML = varibl;
    }
</script>

I've looked around and can't find any thing. this doesn't work and I don't know how to make it work.

the full code:

<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head>
    <title>clicker clicker</title>
    <style>
        html {
            text-align: center;
            background-color: #d1d1d1;
            font-family:Verdana;
        }
        .onebutton {
        background-color: #f4f4f4;
        border: 2px solid #5b5b5b;
        color: #5b5b5b;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 32px;
        cursor: pointer;
        border-radius: 8px;
        box-shadow:inset 0px 12px 22px 2px #ffffff;
        }
        .onebutton:active {
            background-color: #e5e5e5;
        }
        .twobutton {
        background-color: #f4f4f4;
        border: 2px solid #5b5b5b;
        color: #5b5b5b;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        border-radius: 8px;
        box-shadow:inset 0px 12px 22px 2px #ffffff;
        }
        .twobutton:active {
            background-color: #e5e5e5;
        }
    </style>
</head>
<body>
    <h1>Clicker Clicker</h1>
    <p id="number"></p>
    <button class="onebutton"><a herf="#" onClick="clc();">click</a>
</button>
    <br>
    <p>clicker:100</p>
    <button class="twobutton"><a herf="#" 
onClick="upgrade('clk1',c1);">buy</a></button>
    <p id="clk1"></p>
    <p>clicker:1000</p>
    <button class="twobutton"><a herf="#" onClick="upgrade('clk2',c2);">buy</a></button>
    <p id="clk2"></p>
    <script>
        var number = 0;
        var c1 = 0;
        var c2 = 0;
        document.getElementById("number").innerHTML = number;

        function clc() {
            number += 1;
            document.getElementById("number").innerHTML = number;
        }
        function update() {
            number += c1;
            document.getElementById("number").innerHTML = number;
            c1 += c2;
            document.getElementById("clk1").innerHTML = c1;
        }
        function upgrade(what,clicker) {
            window[clicker] += 1;
            document.getElementById(what).innerHTML = clicker;
        }   
        setInterval(update, 100);
    </script>
</body>
</html>

this is here so it doesnt say i have to much code sdljnvaksjdnfblkajsdbfjmas dbfmha bsdmnfb admsf bds msadf

What seems to be not working ?

bhansa
– bhansa

2017-09-17 14:56:11 +00:00
Commented Sep 17, 2017 at 14:56 — bhansa
– bhansa, Commented Sep 17, 2017 at 14:56
the variable dosn't change when the button is pressed

jnick
– jnick

2017-09-17 14:57:09 +00:00
Commented Sep 17, 2017 at 14:57 — jnick
– jnick, Commented Sep 17, 2017 at 14:57
Check the below answer, I updated the example.

bhansa
– bhansa

2017-09-17 15:20:56 +00:00
Commented Sep 17, 2017 at 15:20 — bhansa
– bhansa, Commented Sep 17, 2017 at 15:20

krishna raikar · Accepted Answer · 2017-09-17 15:12:08Z

1

User can use object for easy modification of values inside function

<button><a herf="#" onClick="myFunction('clk1','c1');">button</a></button>
<p id="clk1"></p> 
..
<button><a herf="#" onClick="myFunction('clk1','c2');">button</a></button>
<p id="clk1"></p> 
..
<button><a herf="#" onClick="myFunction('clk1','c3');">button</a></button>
<p id="clk1"></p>

and the script

<script>
    var c = {c1: 0, c2: 0, c3: 0}
    function myFunction(paragraph,varibl) {
            c[varibl] = c[varibl] + 1 
            document.getElementById(paragraph).innerHTML = c[varibl];
    }
</script>

answered Sep 17, 2017 at 15:12

krishna raikar

2,66511 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

casraf · Accepted Answer · 2017-09-17 15:01:03Z

1

If you have to pass the variable using the signature and can't simply (as per the other answers) directly reference the correct one in the function, here's what you do.

JS always passes a variable by value, not reference. However, if you send an object, the "value" is actually a reference to the original object. So you can do something like this:

var counters = { a: 0 };
function test(key) {
  counters[key]++;
  console.log(counters);
}

<button onclick="test('a')">Click</button>

answered Sep 17, 2017 at 15:01

casraf

21.8k10 gold badges60 silver badges93 bronze badges

2 Comments

Moher Over a year ago

this actually works, but this is really unnecessary coding. don't you agree?

casraf Over a year ago

True. But I don't usually assume we have the full context in SO questions - OP might have needed to use it this way for some reason.

Moher · Accepted Answer · 2017-09-17 15:06:05Z

1

do this:

<button><a herf="#" onClick="myFunction('clk1');">button</a></button>
<p id="clk1"></p>

and then:

<script>
    var c1 = 0;
    function myFunction(paragraph) {
            c1++;
            document.getElementById(paragraph).innerHTML = c1;
    }
</script>

each time you call this method, the variable goes up by one! jsfiddle

edited Sep 17, 2017 at 15:06

answered Sep 17, 2017 at 14:58

Moher

7417 silver badges18 bronze badges

3 Comments

jnick Over a year ago

thank you but i want to have more buttons with c1, c2, c3... variables

Moher Over a year ago

take a look at jsfiddle! isn't this what you want? i edited the post.

casraf Over a year ago

@jnick in that case you might want to use my example and just add more keys to your counter.

bhansa · Accepted Answer · 2017-09-17 15:16:24Z

0

<body>
<button><a herf="#" onClick="myFunction('clk1','c1');">Para 1</a></button>
<p id="clk1"></p>

<button><a herf="#" onClick="myFunction('clk2','c2');">Para 2</a></button>
<p id="clk2"></p>

<button><a herf="#" onClick="myFunction('clk3','c3');">Para 3</a></button>
<p id="clk3"></p>

<script>
    var c = {c1:0, c2:0, c3:0};
    function myFunction(paragraph,varibl) {
            document.getElementById(paragraph).innerHTML = ++c[varibl];
    }
</script>
</body>

edited Sep 17, 2017 at 15:16

answered Sep 17, 2017 at 14:58

bhansa

7,5763 gold badges35 silver badges58 bronze badges

3 Comments

Moher Over a year ago

this doesn't do

bhansa Over a year ago

@Moher what doesn't do, it seems to be changing the value.

Moher Over a year ago

i doesn't increment value for me though

Collectives™ on Stack Overflow

changing js variables which are parameters in a function?

4 Answers 4

Comments

2 Comments

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related