how do I change the name or even make interactions in a div

Asked

Viewed 27 times

-2

how do I change the text of a div I’ve tried the way I knew using the:

 function clicou() {
   var toc = document.getElementById('f1')
   toc.innerText="clicou"
}

I am trying to change the text of id F1 div:

function clicou() {
  var toc = document.getElementById('f1')
  toc.innerText = "clicou"
}
body {
  background-color: rgba(112, 128, 144, 0.61);
  display: flex;
}

header {
  display: flex;
  margin: auto;
}

div#f1 {
  background-color: rgb(8, 179, 156);
  width: 300px;
  height: 200px;
  border-bottom-left-radius: 30px;
  border-top-left-radius: 30px;
  box-shadow: 3px 3px 3px 0.2mm;
  text-align: center;
  line-height: 200px;
}

div#f2 {
  background-color: rgb(8, 179, 156);
  width: 225px;
  height: 200px;
  border-right: 3px inset rgb(0, 0, 0);
  border-left: 3px inset rgb(0, 0, 0);
  text-align: center;
  line-height: 200px;
  box-shadow: 3px 3px 3px 0.2mm;
}

div#f3 {
  background-color: rgb(8, 179, 156);
  width: 225px;
  height: 200px;
  border-right: 3px inset rgb(0, 0, 0);
  text-align: center;
  box-shadow: 3px 3px 3px 0.2mm;
  text-align: center;
  line-height: 200px;
}

div#f4 {
  background-color: rgb(8, 179, 156);
  width: 250px;
  height: 200px;
  text-align: center;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  box-shadow: 3px 3px 3px 0.2mm;
  text-align: center;
  line-height: 200px;
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css" midia="all">
</head>

<body>
  <header id="had">
    <div id="f1"> era para mudar aqui </div>
    <div id="f2"> home </div>
    <div id="f3"> consfigurações </div>
    <div id="f4"> informções </div>
  </header>

  <section id="sec"> </section>
  <footer id="foo"> </footer>
  <script src="comandos.js">
  </script>
</body>

</html>

javascript

  • Try to put toc.innerHTML = "clicou" to see if it goes.

  • 2

    You just declared the function, but you didn’t execute it at any time!

1 answer

1

Create a button to perform the action:

<button onclick="clicou();">Clique aqui</button>

And do not forget to put ; at the end of each line of js:

function clicou() {
   var toc = document.getElementById('f1');
   toc.innerText="clicou";
}

If you do not want button to execute the action, just put at the end of js the function call:

clicou();

Browser other questions tagged javascript

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