Return the Array to green. When the button is clicked, return the value immediately above the button

Asked

Viewed 93 times

0

Return an array with each green value on the page load (show in console). When the button is clicked, return the value immediately above the button.

 <!DOCTYPE html>
    <html lang="pt">
    <head>
        <meta charset="UTF-8">
        <title>Teste 002</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js"
                integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script>
        <script>
          (function (win, doc) {
            var f = doc.getElementsByTagName("script")[0];
            var j = doc.createElement("script");
            j.async = true;
            j.src = './tagueamento.js';
            f.parentNode.insertBefore(j, f);
          })(window, document);
        </script>
    </head>
    <body>
    <h1>
        Retorne um array com cada valor verde no carregamento da página (mostrar no console). Quando o botão for clicado,
        retorne o valor imediatamente acima do botão.
    </h1>
    <style>
        #valores span {
            background: green;
        }
        span{
            color: white;
        }
        #valores span, #botoes a {
            width: 125px;
            margin: 1em;
            text-align: center;
            display: block;
            float: left;
            border: 1px solid black;
        }

        #botoes {
            float: left;
        }
    </style>
    <div id="valores">
        <span></span><span></span><span></span><span></span><span></span>
    </div>
    <div id="botoes">
        <a>1</a>
        <a>2</a>
        <a>3</a>
        <a>4</a>
        <a>5</a>
    </div>
    <script>
      $('#valores').find('span').each(function () {
        $(this).text('cxxx-xxbx-xaxx'.replace(/x/g, function () {
          return Math.floor(Math.random() * 10).toString(10);
        }))
      })
    </script>
    </body>
    </html>
javascript html

1 answer

0

Use full screen mode

(function(win, doc) {
  var f = doc.getElementsByTagName("script")[0];
  var j = doc.createElement("script");
  j.async = true;
  j.src = './tagueamento.js';
  f.parentNode.insertBefore(j, f);
})(window, document);


(() => {
  const arrayValores = [];
  document.querySelectorAll("#valores span").forEach((span, index) => {
    let cod = ('cxxx-xxbx-xaxx').replace(/x/g, () => Math.floor(Math.random() * 10).toString(10));
    arrayValores.push(cod);
    span.innerHTML = arrayValores[index];
    document.querySelectorAll("#botoes a")[index].onclick = e => console.log(arrayValores[index]);
  });
  console.log(arrayValores);
})();
#valores span {
  background: green;
}

span {
  color: white;
}

#valores span,
#botoes a {
  width: 125px;
  margin: 1em;
  text-align: center;
  display: block;
  float: left;
  border: 1px solid black;
}

#botoes {
  float: left;
}
<!DOCTYPE html>
<html lang="pt">

<head>
  <meta charset="UTF-8">
  <title>Teste 002</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script>
  <script>
  </script>
</head>

<body>
  <h1>
    Retorne um array com cada valor verde no carregamento da página (mostrar no console). Quando o botão for clicado, retorne o valor imediatamente acima do botão.
  </h1>

  <div id="valores">
    <span></span><span></span><span></span><span></span><span></span>
  </div>
  <div id="botoes">
    <a>1</a>
    <a>2</a>
    <a>3</a>
    <a>4</a>
    <a>5</a>
  </div>
  <script>
  </script>
</body>

</html>

That might work in this case: 

(() => {
    const arrayValores = [];
    document.querySelectorAll("#valores span").forEach((span, index) => {
        let cod = ('cxxx-xxbx-xaxx').replace(/x/g, () => Math.floor(Math.random() * 10).toString(10));
        arrayValores.push(cod);
        span.innerHTML = arrayValores[index];
        document.querySelectorAll("#botoes a")[index].onclick = e => console.log(arrayValores[index]);
    });
    console.log(arrayValores);
})();

  • Illustrious, good afternoon! I got no effect on the project. It can be more specific.

  • I replaced your script at the end of the page and put inside this new function

  • It creates an array of values and starts going through the span’s on the page, so it generates the code ('cxxx-xxbx-xaxx') and puts it in html and at the same time adds the event to the button

  • Do you get any error on the console? I ran here with the page you posted and it worked perfectly.

  • The screen is static, it is not returning an array with each green value in the page load (show in the console). When the button is clicked, return the value immediately above the button.

  • Running here on the site works normally?

  • Here on the site works!

  • Executes the code I posted on the console in the browser, see if it has effect, for some reason it seems that the function is not calling itself in the page loading

Show 3 more comments

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.