圧力センサで円を二つ表示させたい

Aruduinoで曲げセンサから圧力を検知し、bluetoothでブロードキャストし、それをスマホで受け取って圧力によって円を表示させるプログラムを作っています。
上から下へ移動する円をは表示させられているのですが、下から上に動く円は表示できていません。たぶんかなり初歩的なミスだと思うのですが、どこが違っているのか教えていただけると嬉しいです（ ; ; ）

Javascript
1<!DOCTYPE html><html lang="en"><head>
2    <script src="p5.js"></script>
3    <script src="p5.sound.min.js"></script>
4    <link rel="stylesheet" type="text/css" href="style.css">
5    <meta charset="utf-8">
6
7    <style>
8        *{margin: 0; padding: 0;}
9        body,html{width: 100%;  height: 100%;}
10        #base{width: 100%;  height: 100%; background-color: black; position: absolute; top:0; left:0; z-index: 0;}
11        #white{width: 100%;  height: 100%; background-color: transparent; position: absolute; top:0; left:0; z-index: 1;}
12        #black{width: 100%;  height: 100%; background-color: transparent; position: absolute; top:0; left:0; z-index: 2 ;}
13        
14        #balldown{background-color: white; position: absolute; top: -200px; left: 0; width: 200px; height: 200px; border-radius: 200px; transition: all ease 0.5s;}
15        #ballup{background-color: white; position: absolute; bottom:-200px; left: 0; width: 200px; height: 200px; border-radius: 200px; transition: all ease 0.5s;}
16        
17    </style>
18
19  </head>
20  <body>
21
22    <div id="base">
23        <div id="white">
24            <div id="balldown"></div>
25            <div id="ballup"></div>
26        </div>
27        <div id="black">
28            <button onClick='connect()'>connect</button>
29            <button onClick='disconnect()'>disconnect</button>
30            <img src="https://github.com/mizuki-yoshida/mizuki-yoshida.github.io/raw/main/pngegg.png" alt="icon">
31        </div>
32    </div>
33
34
35
36
37<script>
38
39    var myDevice;
40    var all = false;
41    
42    function connect(){
43        navigator.bluetooth.requestDevice(
44        {filters: [{services: ['battery_service']}]})
45            .then(function(device) {
46                // save the device returned so you can disconnect later:
47                myDevice = device;
48                console.log(device);
49                // connect to the device once you find it:
50                return device.gatt.connect();
51            })
52            .then(function(server) {
53                // get the primary service:
54                return server.getPrimaryService('battery_service');
55            })
56            .then(function(service) {
57                // get the  characteristic:
58                return service.getCharacteristics('battery_level');
59            })
60            .then(function(characteristics) {
61                // subscribe to the characteristic:
62                for (c in characteristics) {
63                    characteristics[c].startNotifications()
64                        .then(subscribeToChanges);
65                }
66            })
67            .catch(function(error) {
68                // catch any errors:
69                console.error('Connection failed!', error);
70            });
71    }
72
73    // subscribe to changes from the meter:
74    function subscribeToChanges(characteristic) {
75        characteristic.oncharacteristicvaluechanged = handleData;
76    }
77
78    // handle incoming data:
79    function handleData(event) {
80        var buf = event.target.value.getUint8();;
81//         console.log(buf);
82        var bd = document.getElementById("balldown");
83        var bu = document.getElementById("ballup");
84        
85        if(all === false){
86            var btop = -200;
87            var bbottom = -200;
88            var bwidth = 200;
89            var rad = 200;
90            
91            if(buf >= 33){
92            console.log(all);
93            console.log(buf);
94            btop += buf * 10;
95            bbottom += buf * 10;
96            bwidth += buf * 5;
97            rad -= buf;
98                
99            bd.style.top = btop + "px";
100            bd.style.width = bwidth + "px";
101            bd.style.height = bwidth + "px";
102            bd.style.borderRadius =  rad + "px";
103                
104            bu.style.bottom = btop + "px";
105            bu.style.width = bwidth + "px";
106            bu.style.height = bwidth + "px";
107            bu.style.borderRadius =  rad + "px";
108            
109        }else{
110            bd.style.top = "-200px";
111            bd.style.width = "200px";
112            bd.style.height = "200px";
113             bd.style.borderRadius =  "200px";
114            
115            bu.style.bottom = "-200px";
116            bu.style.width = "200px";
117            bu.style.height = "200px";
118             bu.style.borderRadius =  "200px";
119        }if(buf >= 55){
120            all = true;
121        } 
122        } if(all === true){
123            bd.style.top = "0";
124            bd.style.width = "2000px";
125            bd.style.height = "2000px";
126            bd.style.borderRadius = "0px";
127            
128            bu.style.bottom = "0";
129            bu.style.width = "2000px";
130            bu.style.height = "2000px";
131            bu.style.borderRadius = "0px";
132        }
133        
134
135
136        //draw elements
137    }
138
139    // disconnect function:
140    function disconnect() {
141        if (myDevice) {
142            // disconnect:
143            myDevice.gatt.disconnect();
144        }
145    }
146
147
148
149</script>
150
151</body></html>