CODEWITHSUNDEEP
javascripthtmlcss
George Gibson
George Gibson

Reputation: 71

How can I also display text when clicked?

How can I also display text when these custom "buttons" are clicked? I would imagine it was an if statement but i'm unsure on how to incorporate that and all the other statements needed to do so, I've tried doing so but have had no success and was wondering if anyone could help? 

function alter() {
  var button = document.getElementById('addButton');
  button.setAttribute('class', 'cancelButton');
}

function alter2() {
  var button = document.getElementById('leftButton');
  button.setAttribute('class', 'cancelLeftButton');
}

function alter3() {
  var button = document.getElementById('rightButton');
  button.setAttribute('class', 'cancelRightButton');
}
#addButton {
  background-color: black;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -50px;
  font-size: 60px;
  color: white;
  text-align: center;
  line-height: 90px;
}
.cancelButton {
  animation: turnToCross 1s forwards cubic-bezier(0.000, 1.650, 1.000, 1.650);
}
@keyframes turnToCross {
  to {
    border-radius: 0;
    transform: rotate(45deg);
    background-color: #AD80FF;
  }
  from {}
}
#leftButton {
  background-color: black;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: fixed;
  top: 50%;
  left: 25%;
  margin: -50px;
  font-size: 60px;
  color: white;
  text-align: center;
  line-height: 90px;
}
.cancelLeftButton {
  animation: turnToCross 1s forwards cubic-bezier(0.000, 1.650, 1.000, 1.650);
}
@keyframes turnToCross {
  to {
    border-radius: 0;
    transform: rotate(45deg);
    background-color: #AD80FF;
  }
  from {}
}
#rightButton {
  background-color: black;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: fixed;
  top: 50%;
  right: 25%;
  margin: -50px;
  font-size: 60px;
  color: white;
  text-align: center;
  line-height: 90px;
}
.cancelRightButton {
  animation: turnToCross 1s forwards cubic-bezier(0.000, 1.650, 1.000, 1.650);
}
@keyframes turnToCross {
  to {
    border-radius: 0;
    transform: rotate(45deg);
    background-color: #AD80FF;
  }
  from {}
}
<body>
  <div onclick="alter()" id="addButton">+</div>
  <div onclick="alter2()" id="leftButton">+</div>
  <div onclick="alter3()" id="rightButton">+</div>
</body>

Upvotes: 0

Views: 123

Answers (3)

Farhan
Farhan

Reputation: 1483

As per my understanding, add button.innerHTML = "place your text"; in each click function

<script>
    function alter() {
        var button = document.getElementById('addButton');
        button.setAttribute('class', 'cancelButton');
        button.innerHTML = "place your text";
    }

    function alter2() {
        var button = document.getElementById('leftButton');
        button.setAttribute('class', 'cancelLeftButton');
        button.innerHTML = "place your text";
    }

    function alter3() {
        var button = document.getElementById('rightButton');
        button.setAttribute('class', 'cancelRightButton');
        button.innerHTML = "place your text";
    }
</script>

Upvotes: 0

SZD
SZD

Reputation: 81

First you need to add an element you want your text to be shown

  <body>
        <div onclick="alter()" id="addButton">+</div>
        <div onclick="alter2()" id="leftButton">+</div>
        <div onclick="alter3()" id="rightButton">+</div>
        <div id="showhereid "></div>
    </body>

Then, inside of the function of button to be clicked, you're gonna insert this line of code 

 document.getElementById('showhereid').innerHTML = "your text";

Your javascript code will look like this:

<script>
            function alter() {
                var button = document.getElementById('addButton');
                button.setAttribute('class', 'cancelButton');
                document.getElementById('showhereid').innerHTML = "your text";
            }

            function alter2() {
                var button = document.getElementById('leftButton');
                button.setAttribute('class', 'cancelLeftButton');
               document.getElementById('showhereid').innerHTML = "your text";
            }

            function alter3() {
                var button = document.getElementById('rightButton');
                button.setAttribute('class', 'cancelRightButton');
                document.getElementById('showhereid').innerHTML = "your text";
            }
        </script>

See if helps :)

Upvotes: 3

Arg0n
Arg0n

Reputation: 8423

Assuming @Farhan is correct, you can do this:

button.innerHTML = "Text";

Example from your code:

function alter() {
    var button = document.getElementById('addButton');
    button.setAttribute('class', 'cancelButton');
    button.innerHTML = "My text";
}

Upvotes: 0

Related Questions