Search code examples
javascriptfunctionvariablesglobalecmascript-5

Javascript global variable inside class function

I'm not really used to es5, so i'm having a bit of trouble since i'm forced to use es5 in my case. the problem is when I do, updateScoreboard({"name":"foo","bgColor":{"r":47.0,"b":79.0,"a":255.0,"g":79.0}})

to create a new panel on the scoreboard, my isPlayerInScoreboard function is returning false because playerName2 is somehow a global variable and not bound to the function PlayerPanel, you can see what I mean by invoking updateScoreboard({"name":"foo","bgColor":{"r":47.0,"b":79.0,"a":255.0,"g":79.0}}) and then logging out "playerName2", which I don't think should be a global variable but somehow is

edit: also when I do this

updateScoreboard({"name":"foo","bgColor":{"r":47.0,"b":79.0,"a":255.0,"g":79.0}}) updateScoreboard({"name":"bar","bgColor":{"r":47.0,"b":79.0,"a":255.0,"g":79.0}})

in my panels array, all the object's getPlayerName method returns the last inputted name, so in this case if I did panels[0].getPlayerName() it'd return "bar" which is should return "foo"

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style type="text/css">
        body {
            background-color: rgba(25, 25, 25, 0.50);
            font-family: "Arial";

        }

        .tab {

            margin: 1px auto;
            width: 95%;
            height: 30px;
            background-color: white;
        }

        #title-header {
            /*display:inline-block;*/
            /*color: white;*/
            font-size: 25px;
            color: white;
            /*border-top: 1px solid white;*/
            /*border-bottom: 1px solid white;*/
            margin:0 auto;
            /*vertical-align: middle;*/
            text-align:center;
            /*white-space: nowrap;*/

        }

        .player-img {
            display: inline-block;
            /*width: 50px;*/

        }

        .player-name {
            display: inline-block;
            position: relative;
            bottom: 10px;
            color: white;
        }
    </style>
</head>
<body>

    <div id="title-header">
        <h1>SleekRP</h1>
    </div>

    <div class="main-scoreboard">
        <div class="tab">
            <div class="player-img">
                <img src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/fe/fef49e7fa7e1997310d705b2a6158ff8dc1cdfeb.jpg">
            </div>
            <p class="player-name">test</p>
        </div>

        <!-- <div class="tab"></div>
        <div class="tab"></div>
        <div class="tab"></div>
        <div class="tab"></div> -->
    </div>

    <script>
        var panels = [];

        function setTitle(title){
            document.getElementById("title-header").innerText = title
        }

        function isPlayerInScoreboard(name){
            for (var i=0; i<panels.length; i++){
                if (panels[i].getPlayerName() == name) {
                    return true
                }
            }
            return false
        }

        function updateScoreboard(plyInfo){
            if (!isPlayerInScoreboard(plyInfo.name)) {
                PlayerPanel(plyInfo)
            }
        }

        function PlayerPanel(plyInfo){
            // Create element
            var mainPanel = document.createElement('div')
            mainPanel.className = "tab"
            mainPanel.style.backgroundColor = "rgba(" + plyInfo.bgColor.r + ", " + plyInfo.bgColor.g + ", " + plyInfo.bgColor.b + ", 0.50)"
            document.getElementsByClassName("main-scoreboard")[0].appendChild(mainPanel)

            this.playerName2 = document.createElement('p')
            this.playerName2.innerText = plyInfo.name
            this.playerName2.className = "player-name"
            mainPanel.appendChild(this.playerName2)

            this.setPlayerName = function(name) {
                this.playerName2.innerText = name
            }

            this.updatebGColor = function(bgColor){
                mainPanel.style.backgroundColor = "rgba(" + bgColor.r + ", " + bgColor.g + ", " + bgColor.b + ", 0.50)"
            }

            this.getPlayerName = function() {
                return this.playerName2.innerText
            }
            panels.push(this)
        }
    </script>
</body>
</html>
Solution

  • You should call your PlayerPanel with "new" when you are using "this" in it. 

     function updateScoreboard(plyInfo){
        if (!isPlayerInScoreboard(plyInfo.name)) {
            new PlayerPanel(plyInfo)
        }
    }