CODEWITHSUNDEEP
javascripthtmlcss
Fris Piet
Fris Piet

Reputation: 37

My css class info does do the following. Add price in the place off ... as text

I have the following info that does not display what I want it to display

On the container it will start by showing ... , then it must change to show price in the place off ...

It start with showing the ..., but then it show the price at the back of the container.

Not sure why it does not work, I know my javascript is working, even if it is behind the cointainer.

How do I fixed this problem.

Code html,css and javascript

let ws_binance_shib = new WebSocket('wss://stream.binance.com:9443/ws');
let html_element_binance_shib = document.getElementById('show_price_binance_shib');

let last_price_binance_shib = null;

ws_binance_shib.onopen = function () {
    ws_binance_shib.send(JSON.stringify ({
        'method': 'SUBSCRIBE',
        'params': ['shibusdt@trade'],
        'id': 1
    }))
};

ws_binance_shib.onmessage = function (event) {
    let current_price_binance_shib = JSON.parse(event.data);
    let price_binance_shib = parseFloat(current_price_binance_shib.p).toFixed(8);
    html_element_binance_shib.innerText = price_binance_shib;

    if ((price_binance_shib < last_price_binance_shib) && (isNaN(price_binance_shib) == false)) {
        html_element_binance_shib.innerText = '↓' + price_binance_shib;
        html_element_binance_shib.style.color = 'Bright Red';
    } else if ((price_binance_shib > last_price_binance_shib) && (isNaN(price_binance_shib) == false)) {
        html_element_binance_shib.innerText = '↑' + price_binance_shib;
        html_element_binance_shib.style.color = 'lime';
    } else if ((price_binance_shib == last_price_binance_shib) && (isNaN(price_binance_shib) == false)) {
        html_element_binance_shib.innerText = price_binance_shib;
        html_element_binance_shib.style.color = 'Purple';
    }

    last_price_binance_shib = price_binance_shib;
};
*{
    padding: 0;
    margin: 0;
}
body{
width: 100%;
height: 100vh;
background: #29303f;
display: grid;
justify-content: center;
align-content: center;
}
/* containera */
.containera{
    width: 350px;
    border-radius: 20px;
    height: 400px;
    background: #1e1e1e;    
    display: grid;
    justify-content: center;
    align-content: center;
    position: relative;
    overflow: hidden;
}
.containera span{
color: #fff;
font-size: 30px;
font-weight: bold;
font-family: arial;
font-family: Consolas, monaco, monospace;
z-index: 1;
}
.containera::before{
content: '';
position: absolute;
width: 150px;
height: 600px;
left: 75px;
top: -100px;
background: linear-gradient(#00e5ff, #b400fb);
animation: animate 10s linear infinite;
}
@keyframes animate{
    0%{
        transform: rotate(0deg);
    }100%{
        transform: rotate(360deg);
    }   
}
.containera::after{
    content: '';
    position: absolute;
    inset: 5px;
    background: #29303f;
    border-radius: 18px;
}
.row {
   width: 100%;
}

.row span {
   font-size: 0.8vw;
   font-weight: 700;
}

.col-2 {
   font-size: 1.8vw;
   font-weight: 700;
   border-radius: 2vw;
   box-shadow: 10px 10px 25px #e0e0e0;
}

.pair {
   font-size: 0.8vw;
   font-weight: 500;
}

.price {
   font-family: Consolas, monaco, monospace;
}
<!DOCTYPE html>
<html lang='en'>

<head>

    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Lewendige prys</title>
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
    <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/' crossorigin='anonymous'></script>
    <link rel='stylesheet' type='text/css' href='live.css'>

</head>

<body>

    <div >
        <div>
            <div class='d-flex align-items-center justify-content-center'>
               
                <div class='col-2 p-5 me-5'>
                    <div class='d-flex justify-content-end mb-3'><span>SHIBA INU</span></div>
                    <div class='containera d-flex justify-content-end price' id='show_price_binance_shib'>...</div>
                </div>
            </div>
        </div>
    </div>

    <script src='live.js'></script>

</body>

</html>

Upvotes: 0

Views: 60

Answers (1)

Kumara
Kumara

Reputation: 536

The reason why the innerText of <div id="show_price_binance_shib"> doesn't show is, the :before and :after selectors are styled using position: absolute;.

Solution:

Inside the #show_price_binance_shib div use a span tag to wrap the dots(...) and then reference it in JavaScript to change the innerText.

Using the z-index property raise the span tag above the :before and :after selectors.

Editted Code:

let ws_binance_shib = new WebSocket('wss://stream.binance.com:9443/ws');
// Instead of 'getElementById' method 'querySelector' is used to get the '<span>' tag inside the 'div' 
let html_element_binance_shib = document.querySelector('#show_price_binance_shib span');

let last_price_binance_shib = null;

ws_binance_shib.onopen = function() {
  ws_binance_shib.send(JSON.stringify({
    'method': 'SUBSCRIBE',
    'params': ['shibusdt@trade'],
    'id': 1
  }))
};

ws_binance_shib.onmessage = function(event) {
  let current_price_binance_shib = JSON.parse(event.data);
  let price_binance_shib = parseFloat(current_price_binance_shib.p).toFixed(8);
  html_element_binance_shib.innerText = price_binance_shib;

  if ((price_binance_shib < last_price_binance_shib) && (isNaN(price_binance_shib) == false)) {
    html_element_binance_shib.innerText = '↓' + price_binance_shib;
    html_element_binance_shib.style.color = 'Bright Red';
  } else if ((price_binance_shib > last_price_binance_shib) && (isNaN(price_binance_shib) == false)) {
    html_element_binance_shib.innerText = '↑' + price_binance_shib;
    html_element_binance_shib.style.color = 'lime';
  } else if ((price_binance_shib == last_price_binance_shib) && (isNaN(price_binance_shib) == false)) {
    html_element_binance_shib.innerText = price_binance_shib;
    html_element_binance_shib.style.color = 'Purple';
  }

  last_price_binance_shib = price_binance_shib;
};
* {
  padding: 0;
  margin: 0;
}

body {
  width: 100%;
  height: 100vh;
  background: #29303f;
  display: grid;
  justify-content: center;
  align-content: center;
}


/* containera */

.containera {
  width: 350px;
  border-radius: 20px;
  height: 400px;
  background: #1e1e1e;
  display: grid;
  justify-content: center;
  align-content: center;
  position: relative;
  overflow: hidden;
}

.containera span {
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  font-family: arial;
  font-family: Consolas, monaco, monospace;
  z-index: 1;
  /* by this 'z-index: 1;' property the 'span' tag is shown above */
}

.containera::before {
  content: '';
  position: absolute;
  width: 150px;
  height: 600px;
  left: 75px;
  top: -100px;
  background: linear-gradient(#00e5ff, #b400fb);
  animation: animate 10s linear infinite;
}

@keyframes animate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.containera::after {
  content: '';
  position: absolute;
  inset: 5px;
  background: #29303f;
  border-radius: 18px;
}

.row {
  width: 100%;
}

.row span {
  font-size: 0.8vw;
  font-weight: 700;
}

.col-2 {
  font-size: 1.8vw;
  font-weight: 700;
  border-radius: 2vw;
  box-shadow: 10px 10px 25px #e0e0e0;
}

.pair {
  font-size: 0.8vw;
  font-weight: 500;
}

.price {
  font-family: Consolas, monaco, monospace;
}
<!DOCTYPE html>
<html lang='en'>

<head>

  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Lewendige prys</title>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
  <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/' crossorigin='anonymous'></script>
  <link rel='stylesheet' type='text/css' href='live.css'>

</head>

<body>

  <div>
    <div>
      <div class='d-flex align-items-center justify-content-center'>

        <div class='col-2 p-5 me-5'>
          <div class='d-flex justify-content-end mb-3'><span>SHIBA INU</span></div>
          <div class='containera d-flex justify-content-end price' id='show_price_binance_shib'><span>...</span></div>
        </div>
      </div>
    </div>
  </div>

  <script src='live.js'></script>

</body>

</html>

Upvotes: 1

Related Questions