Why in the world an object has stopped being a referance type

so… there is an empty object
there is sum to sum up numbers, i use it because its referance type.
than there is the method, it all worked fine.
now it stoped being referance type.
dont get it why.

as you see it shows 40, than 0, than 15, than 40 again.
while it should be, 40, stay 40, 55, stay 55.

1 Like

Please do not post a link to an album of screenshots. Please post your actual code.

<head>

    <title>עבודה 4</title>

    <style> 

    /* --------------------------------------------------------------- Style ---------------------------------------------------------- */

    /* ------------------------------------------------------- Signeture Body Style ----------------------------------------------- */

        body {  

            background: url(https://phandroid.s3.amazonaws.com/wp-content/uploads/2015/02/galaxy-wallpaper-1.jpg);

            background-size: auto;

            background-position: center;

        }

        /* ---------------------------------------------------- centering the content ---------------------------------------------- */

        .wrapper{

                display: grid;

                align-items: center;

                align-content: center;

                justify-items: center;

                justify-content: center;

        }

        ul {

            margin-top: 5px;

        }

        ul li {

            list-style-type: none;

            color: rgb(165, 207, 14);

            font-weight: 700;

        }

        p {

            margin-bottom: 0px;

            color: rgb(16, 162, 230);

            font-weight: 700;

            font-size: 15px;

        }

        #btn-submit {

            display: inline-block;

            background-color: rgb(240, 228, 126);

            font-size: 30px;

            color: rgb(255, 0, 51);

            margin-left: 5px;

            padding: 10px;

        }

        /* --------------------------------------------------- making them hidden on the page -------------------------------------------------- */

        #reward {

            display: none;

            position: absolute;

            bottom: 325px !important;

            margin-left: 45px;

        }

        .btn{

            display: none;

            font-size: 30px;

            height: 100px;

            width: 200px;

            text-align: center;

            background-color: rgb(55, 14, 73);

            color: rgb(235, 135, 42);

            padding: 10px;

            position: absolute;

            

        }

        /* ----------------------------------------- positioning the buttons around the page at the correct location ----------------------------------- */

        #top-left{

            top: 20px !important;

            left: 20px !important;

        }

        #top {

            top: 20px !important;

        }

        #top-right{

            top: 20px !important;

            right: 20px !important;

        }

        #right{

            right: 20px !important;

            bottom: 350px !important;

        }

        #bottom-right{

            right: 20px !important;

            bottom: 20px !important;

        }

        #bottom{

            bottom: 20px !important;

        }

        #bottom-left{

            bottom: 20px !important;

            left: 20px !important;

        }

        #left{

            left: 20px !important;

            bottom: 350px !important;

        }

        #center{

            bottom: 350px !important;

        }

        /* --------------------------------------------------------------- end of styling ----------------------------------------------------- */

    </style>

    <script>

        // ------------------------------------------------------------------ Script -------------------------------------------------------- //

        // ----------------------------------------------- with oop its easier to sum the the correct answers ---------------------------------------- //

        class Whatever

        {

            sum=0;

            c1=0;

            c2=0;

            c3=0;

            c4=0;

            c5=0;

            constructor() {}

            // --------------------------------------- method to sum the numbers and make sure it works corectly -------------------------------------- //

            Sum(val)

            {

                if (val == '1-1' && this.c1 == 0)

                {

                    this.sum+= 40;

                    this.c1+= 1;

                }

                else if (this.c1 ==1 && val != '1-1')

                {

                    this.sum-= 40;

                    this.c1-= 1;

                }

                else

                    this.sum+= 0;

                if (val == '2-4' && this.c2 == 0)

                {

                    this.sum+= 15;

                    this.c2+= 1;

                }

                else if (this.c2 == 1 && val != '2-4')

                {

                    this.sum-= 15;

                    this.c2-= 1;

                }

                else

                    this.sum+= 0;

                if (val == '3-2' && this.c3 ==0)

                {

                    this.sum+= 15;

                    this.c3+= 1;

                }

                else if (this.c3 == 1 && val != '3-2')

                {

                    this.sum-= 15;

                    this.c3-= 1;

                }

                else

                    this.sum+= 0;

                if (val == '4-3' && this.c4 == 0)

                {

                    this.sum+= 15;

                    this.c4+= 1;

                }

                else if (this.c4 == 1 && val != '4-3')

                {

                    this.sum-= 15;

                    this.c4-= 1;

                }

                else

                    this.sum+= 0;

                if (val == '5-3' && this.c5 == 0)

                {

                    this.sum+= 15;

                    this.c5+= 1

                }

                else if (this.c5 == 1 && val != '5-3')

                {

                    this.sum-= 15;

                    this.c5-= 1

                }

                else

                    this.sum+= 0;

                console.log("sum= ", this.sum);

            }

            // -------------- the method checks if the grade is 100, hides some parts of the page and reveals other hidden parts ------------------- //

            Check()

            {

                let reward= document.getElementById('reward');

                let btns= document.getElementsByClassName('btn');

                let ps= document.getElementsByClassName('question');

                let uls= document.getElementsByTagName('ul');

                let sub= document.getElementById('btn-submit');

                if (this.sum == 100)

                {

                    // ----------------------- making everything disappear ------------------------ //

                    sub.style.display="none";

                    for (let index = 0; index < ps.length; index++) 

                    {

                        ps[index].style.display="none";

                    }

                    for (let index = 0; index < uls.length; index++) 

                    {

                        uls[index].style.display="none";

                    }

                    // -------------------------------- making the buttons and reward apear ------------------------- //

                    for (let index = 0; index < btns.length; index++) 

                    {

                        btns[index].style.display="inline-block";

                    }

                    reward.style.display= "table";

                }

                else

                    alert("not enough points: "+ this.sum+ "/100, keep trying.");

            }

        }

        // ----------------------------------- method that moves the picture around acording to pressed button's position ------------------------ //

        function Move(dir)

        {

            let newPos= document.getElementById(dir);

            let reward= document.getElementById('reward');

            let currentStyle=getComputedStyle(newPos);

            let newPosTop= currentStyle.top;

            let newPosBottom= currentStyle.bottom;

            let newPosLeft= currentStyle.left;

            let newPosRight= currentStyle.right;

            reward.style.setProperty('top', currentStyle.top);

            reward.style.setProperty('bottom', currentStyle.bottom);

            reward.style.setProperty('left', currentStyle.left);

            reward.style.setProperty('right', currentStyle.right);

        }

        const whatever= new Whatever();

    </script>

</head>

<body>

    <div class="wrapper">

    <!-- A -->

    <p class="question">What is the Name of Google’s Parent Company?</p> 

    <ul id="first">

        <li><input type="radio" id= "q1a1" value="1-1" name="q1" onclick="whatever.Sum(value)" autocomplete="off">A. Alphabet Inc</li>

        <li><input type="radio" id= "q1a2" value="1-2" name="q1" onclick="whatever.Sum(value)" autocomplete="off">B. Amazon</li>

        <li><input type="radio" id= "q1a3" value="1-3" name="q1" onclick="whatever.Sum(value)" autocomplete="off">C. The Priceline Group</li>

        <li><input type="radio" id= "q1a4" value="1-4" name="q1" onclick="whatever.Sum(value)" autocomplete="off">D. None of These</li>

    </ul>

    <!-- D -->

    <p class="question">Pound Sterling is the Currency of?</p>

    <ul id="second">

        <li><input type="radio" id= "q2a1" value="2-1" name="q2" onclick="whatever.Sum(value)" autocomplete="off">A. Canada</li>

        <li><input type="radio" id= "q2a2" value="2-2" name="q2" onclick="whatever.Sum(value)" autocomplete="off">B. United States</li>

        <li><input type="radio" id= "q2a3" value="2-3" name="q2" onclick="whatever.Sum(value)" autocomplete="off">C. Germany</li>

        <li><input type="radio" id= "q2a4" value="2-4" name="q2" onclick="whatever.Sum(value)" autocomplete="off">D. United Kingdom</li>

    </ul>

    <!-- B -->

    <p class="question">Dove is a symbol of?</p>

    <ul id="third">

        <li><input type="radio" id= "q3a1" value="3-1" name="q3" onclick="whatever.Sum(value)" autocomplete="off">A. Love</li>

        <li><input type="radio" id= "q3a2" value="3-2" name="q3" onclick="whatever.Sum(value)" autocomplete="off">B. Peace</li>

        <li><input type="radio" id= "q3a3" value="3-3" name="q3" onclick="whatever.Sum(value)" autocomplete="off">C. Humanity</li>

        <li><input type="radio" id= "q3a4" value="3-4" name="q3" onclick="whatever.Sum(value)" autocomplete="off">D. Charity</li>

    </ul>

    <!-- C -->

    <p class="question">Which among the following, religion has the highest population in the world?</p>

    <ul id="forth">

        <li><input type="radio" id= "q4a1" value="4-1" name="q4" onclick="whatever.Sum(value)" autocomplete="off">A. Hinduism</li>

        <li><input type="radio" id= "q4a2" value="4-2" name="q4" onclick="whatever.Sum(value)" autocomplete="off">B. Buddhism</li>

        <li><input type="radio" id= "q4a3" value="4-3" name="q4" onclick="whatever.Sum(value)" autocomplete="off">C. Christianity</li>

        <li><input type="radio" id= "q4a4" value="4-4" name="q4" onclick="whatever.Sum(value)" autocomplete="off">D. Islam</li>

    </ul>

    <!-- C -->

    <p class="question">The Colosseum ‘is located in which country?</p>

    <ul id="fifth">

        <li><input type="radio" id= "q5a1" value="5-1" name="q5" onclick="whatever.Sum(value)" autocomplete="off">A. Venice</li>

        <li><input type="radio" id= "q5a2" value="5-2" name="q5" onclick="whatever.Sum(value)" autocomplete="off">B. Florence</li>

        <li><input type="radio" id= "q5a3" value="5-3" name="q5" onclick="whatever.Sum(value)" autocomplete="off">C. Rome</li>

        <li><input type="radio" id= "q5a4" value="5-4" name="q5" onclick="whatever.Sum(value)" autocomplete="off">D. Milan</li>

    </ul>

    <button id="btn-submit" onclick="whatever.Check()">Submit</button>

    <button class="btn" id="top-left" value="top-left" onclick="Move(value)">Top Left</button>

    <button class="btn" id="top" value="top" onclick="Move(value)">Top</button>

    <button class="btn" id="top-right" value="top-right" onclick="Move(value)">Top Right</button>

    <button class="btn" id="center" value="center" onclick="Move(value)">Center</button>

    <button class="btn" id="right" value="right" onclick="Move(value)">Right</button>

    <button class="btn" id="bottom-right" value="bottom-right" onclick="Move(value)">Buttom Right</button>

    <button class="btn" id="bottom" value="bottom" onclick="Move(value)">Buttom</button>

    <button class="btn" id="bottom-left" value="bottom-left" onclick="Move(value)">Buttom Left</button>

    <button class="btn" id="left" value="left" onclick="Move(value)">Left</button>

    <div id="reward">

        <img id="imag" src="https://www.flaticon.com/premium-icon/icons/svg/2731/2731156.svg" height="100" width="100">

    </div>

    </div>

</body>
1 Like
class Whatever  {
  sum=0;
  c1=0;
  c2=0;
  c3=0;
  c4=0;
  c5=0;

  constructor() {}

  // -- method to sum the numbers and make sure it works corectly -- //
  Sum(val) {
    if (val == '1-1' && this.c1 == 0)  {
      this.sum+= 40;
      this.c1+= 1;
    } else if (this.c1 ==1 && val != '1-1') {
      this.sum-= 40;
      this.c1-= 1;
    } else
      this.sum+= 0;

    if (val == '2-4' && this.c2 == 0)  {
      this.sum+= 15;
      this.c2+= 1;
    } else if (this.c2 == 1 && val != '2-4') {
      this.sum-= 15;
      this.c2-= 1;
    } else
      this.sum+= 0;

    if (val == '3-2' && this.c3 ==0) {
      this.sum+= 15;
      this.c3+= 1;
    } else if (this.c3 == 1 && val != '3-2') {
      this.sum-= 15;
       this.c3-= 1;
    } else
      this.sum+= 0;

    if (val == '4-3' && this.c4 == 0) {
      this.sum+= 15;
      this.c4+= 1;
    } else if (this.c4 == 1 && val != '4-3') {
      this.sum-= 15;
      this.c4-= 1;
    } else
      this.sum+= 0;

    if (val == '5-3' && this.c5 == 0) {
      this.sum+= 15;
      this.c5+= 1
    } else if (this.c5 == 1 && val != '5-3') {
      this.sum-= 15;
      this.c5-= 1
    } else
      this.sum+= 0;

    console.log("sum= ", this.sum);

  }

I have edited your code to be a bit more human readable.

1 Like

what do you mean by this?

thanks mate, i’d like to note, at the end of the script section there is an empty object cteated.

welll… when i click on of of the radios, lets say 1, thats 40 points, than if at question 2 i click on 4, thats 15 ponts, meaning it should sum to 55.
but instead it turns into 15.
that means its not referance type anymore or something.

it all worked fine before, than decided to check again and it doesnt.
i have been adding few comments but doesnt seem like i commented anything that metters, just on free lines, and they are always closed, the comments i mean.

I’m not sure what you mean by ‘reference type’. Objects are indeed passed around by reference, but there isn’t a type in JS called ‘reference type’.

Are you sure you are not recreating your whatever on each radio button change?

it is at the end of the script, outside of any method.
and it used to work just as intended.
i really dont get it whats the matter.

iam using onclick event on the radios but it send to sum method of whatever with a value.

Can you provide the complete code including the html and other JavaScript? It is difficult to debug without the full code.

1 Like

i did mate, it is up there.
thank you.

A link to a codepen or repl.it is the best way to get help with debugging this sort of thing.

@isaac5893719 Let’s walk through a case where I select answer A for the first question and D for the second question.

Before selecting any answer, this.sum is equal to 0. When I click on A for the first question, the following if statement condition evaluates to true, so this.sum becomes 40andthis.c1becomes1`.

if (val == "1-1" && this.c1 == 0) {

So far so good. The problem is when I select the correct answer D for the second question. The above if statement condition evaluates to false, so the following else if's condition is checked.

} else if (this.c1 == 1 && val != "1-1") {

The above statement evaluates to true, so you subtract 40 from this.sum which make this.sum 0 again and now c1 is set to 0.

Next, the following if statement condition evaluates to true, so this.sum becomes 15 and this.c2 becomes 1.

if (val == "2-4" && this.c2 == 0) {

Now that you know what is going on, you need to rethink your approach here. Give it try and let us know what you come up with. Please post your next attempt at the code in a Codepen or something like it, so we only have to click on a link instead of copying/pasting your code to test it out.

Thank you.

1 Like

thanks alot man.
odlly enough tho, iam pretty sure i tested it after changing and it was fine.
anyways! it does makes sense what you are saying so… i’ll give it a thought.

dam! i was thinking already an object has stoped being referance type, how the hell you solve that, as for this… that is solve able.

Why do you want to track the sum during each click of an answer? Why not just calculate the sum when the Submit button is clicked?

1 Like

by saving each answer to different variable you mean?
and adding than at the end at submit?
hmm… no real reason i suppouse.
is it better in your opinion?

Edit: that’s the solution:

:smiley: now i remember what it is, i descovered i didnt do it right, than i thought quikly about this fix, than i rushed to the store without checking, than today i checked and was sure i checked it yesterday after changing.
LOL.
thats why i thought the object has stoped being referance type.

thank you soo much man!!!