how to do console.log by clicking the button

Asked

Viewed 201 times

-4

I wanted to do console.log by clicking only the button, but what I did makes console log if I click anywhere can explain to me how to make console.log work only by clicking the buttons.

var div = document.querySelector("div");

addEventListener('click', item);

function item() {
  console.log('click');
}
.container2 {
  margin: 0 auto;
  width: 335px;
  padding: 10px;
  background: black;
  font-size: 1.1em;
  text-align: right !important;
}

.container {
  margin: 0 auto;
  width: 335px;
  padding: 10px;
  background: black;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.container>div {
  text-align: center;
  padding: 28px 25px;
  border-radius: 50%;
  color: white;
  margin: 0 7px 11px 0;
  font-family: sans-serif;
  cursor: pointer;
  font-weight: bolder;
  font-size: 20px;
}

.item1 {
  background-color: #a5a5a5;
  color: black;
}

.item2 {
  background-color: #fe9e09;
}

.item3,
.item4 {
  background-color: #333333;
}

.teste {
  color: white;
  margin-bottom: 77px;
  margin-top: 441;
  background: transparent;
  box-shadow: none;
  font-size: 80px;
}

.item4 {
  grid-column: span 2;
  border-radius: 70px !important;
  text-align: left !important;
}
<div class='container'>
  <div class="item1">AC</div>
  <div class="item1">+/-</div>
  <div class="item1">%</div>
  <div class="item2">:</div>
  <div class="item3">7</div>
  <div class="item3">8</div>
  <div class="item3">9</div>
  <div class="item2">x</div>
  <div class="item3">4</div>
  <div class="item3">5</div>
  <div class="item3">6</div>
  <div class="item2">-</div>
  <div class="item3">1</div>
  <div class="item3">2</div>
  <div class="item3">3</div>
  <div class="item2">+</div>
  <div class="item4">0</div>
  <!-- <div class='item4'></div>  -->
  <div class="item3">,</div>
  <div class="item2">=</div>
</div>

javascript

  • to work you have to add the eventlistener to the button element of your code. In the post there is no button.

  • 1

    Dude, you got it as a dial document.querySelector("div"); This means that when you click on the first DIV of the document it already does the console.log, you can see that even clicking off the calculator it gives the console.log, you have to give more details

2 answers

0


Well you can ultilizar the onclick for that! It’s very simple, see an example:

<button id="meu-botao" class="meu-botao" onclick="console.log('O que você deseja imprimir no console.')">Clique-me</button>

Another example

In your script file:

function imprimir() {
console.log("O que você deseja imprimir!")
}

In your HTML file:

<button id="meu-botao" class="meu-botao" onclick="imprimir()">Clique-me</button>

See you! I hope I’ve helped.

0

When you called addeventlistener you did not specify which element should be observed.

You can call the function directly on the TAG, it is not the most correct anymore works.

<div class='container'>
  <div class="item1" onclick="item()">AC</div>
  <div class="item1" onclick="item()">+/-</div>
  <div class="item1" onclick="item()">%</div>
  <div class="item2" onclick="item()">:</div>
  <div class="item3" onclick="item()">7</div>
  <div class="item3" onclick="item()">8</div>
  <div class="item3" onclick="item()">9</div>
  <div class="item2" onclick="item()">x</div>
  <div class="item3" onclick="item()">4</div>
  <div class="item3" onclick="item()">5</div>
  <div class="item3" onclick="item()">6</div>
  <div class="item2" onclick="item()">-</div>
  <div class="item3" onclick="item()">1</div>
  <div class="item3" onclick="item()">2</div>
  <div class="item3" onclick="item()">3</div>
  <div class="item2" onclick="item()">+</div>
  <div class="item4" onclick="item()">0</div>
  <!-- <div class='item4' onclick="item()"></div>  -->
  <div class="item3" onclick="item()">,</div>
  <div class="item2" onclick="item()">=</div>
</div>


function item() {
  console.log('click');
}

Browser other questions tagged javascript

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