how to change color Buttons once it is selected? and if input question

Question

how to change color Buttons once it is selected? and if input question

68 Views Asked by A FR At 12 June 2020 at 21:20

I have this code where I could only change the color once , i want the color of the selected button to change in each diffrent line.that in each line there will be only one button selected but for each line. also i want to add one ,more button that is input button , but there is a way to create input button in angularjs-ng-click? i use angulerjs cause i want to do summery of the buttons in the end of the page. here is a link to how it looks now [1]: https://i.stack.imgur.com/MI4pt.png

.prettyButton:focus {
  background-color:#3C8EB7;
}
.prettyButton {
  font-size: 36px;
  width: 128px;
  height: 56px;
  border: 5px solid #3C8EB7;
  border-radius: 5px;

}
<!DOCTYPE html>
<html>
<head>
    <script src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <script>angular.module('demo', []);</script>
    <link rel="stylesheet" type="text/css" href="button_css.css">
    <script src="button_js.js"></script>
</head>
<body>
    <div ng-app="demo">
    <div class= "list_contain_q">
      <div class="queution_1">
        <div class="q1" style="color: black; font-size: 50px">   TOPIC  </div>
          <button class="prettyButton" ng-click="i = 1" ng-init="button1 = 'SPORT'">{{ button1 }}</button>
          <button class="prettyButton" ng-click="i = 3" ng-init="button3 = 'history'">{{ button3 }}</button>
          <button class="prettyButton" ng-click="i = 4" ng-init="button4 = 'music'">{{ button4 }}</button>
        <br></br>
        </div>
        <div class="queution_2">

        <div class="q2" style="color: black; font-size: 50px"> day   </div>
          <button class="prettyButton" ng-click="j = 12" ng-init="button12 = 'monday'">{{ button12 }}</button>
          <button class="prettyButton" ng-click="j = 22" ng-init="button22 = 'sunday'">{{ button22 }}</button>
          <button class="prettyButton" ng-click="j = 32" ng-init="button32 = 'friday'">{{ button32 }}</button>
          <br></br>
        </div>
        <div class="queution_3">
        <div class="q3" style="color: black; font-size: 50px">   houer   </div>
            <button  class ="prettyButton" ng-click="k = 123" ng-init="button123 = '16:00'">{{ button123 }}</button>
            <button class="prettyButton" ng-click="k = 223" ng-init="button223 = '17:00'">{{ button223 }}</button>
            <button class="prettyButton" ng-click="k = 323" ng-init="button323 = '18:00'">{{ button323 }}</button>
            <button class="prettyButton" ng-click="k = 423" ng-init="button423 = '19:00'">{{ button423 }}</button>
            <button class="prettyButton" ng-click="k = 523" ng-init="button523 = '20:00'">{{ button523 }}</button>
          <br></br>
          <br></br>
        </div>
</div>
 <h2>summary</h2>
 <p class="sumamry" id = "sumamry_id" style="color: black; font-size: 40px; text-align: right;"> topic<input type="text" id = "topicbtn" value="this['button' + i]" ng-model="this['button' + i]" placeholder="topic"vstyle="color: black; font-size: 40px"> in day<input type="text" id="DayBtn" value="this['button' + j]" ng-model="this['button' + j]" placeholder="in day" style="color: black; font-size: 40px"> in hour <input type="text" id = "hourbtn" value="this['button' + k]" ng-model="this['button' + k]" placeholder="time"></p>



</body>
</html>

Original Q&A

There are 1 best solutions below

**AlexH** · Answer 1 · 2020-06-12T21:30:05.540000

To change the color of a selected button, use element.style.color. Here's an example:

var btn = document.getElementById('colorChangeButton'); // Gets the button
var clr = document.getElementById('clr'); // Gets the color
btn.addEventListener('click', (e) => { // When the button is clicked...
btn.style.color = clr.value; // Set the button's color to the value of the color picker
});

<button id="colorChangeButton">Change my color!</button>
<input type=color id="clr">

This is a simple example that allows you to change the color of a button to the value of a color picker. It gets the color value with clr.value and sets the new color with btn.style.color = clr.value.

how to change color Buttons once it is selected? and if input question

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in BUTTON

Related Questions in ANGULARJS-NG-CLICK

Trending Questions

Popular # Hahtags

Popular Questions