CODEWITHSUNDEEP
javascripthtmlbutton
user14541933
user14541933

Reputation:

make buttons in javascript

In my HTML i have put a script and a div. Now i want to make 3 buttons next to each other in the while block in the middle of the page. I want to make the 3 buttons without changing the html and thus make it dynamic inside the javascript.

So far i have put a var in the javascript but i do not know what to do now..

I earlier made a html page with a button element inside it and then change all of it using the html but i cant figure out how to do this if there isn't a button element inside the html page.

HTML:

  <body>
        <div id="container"></div>
        <script src="button.js"></script>
     </body>

CSS:

html{
    background-color: grey;
}

#container{
    top: 10px;
    padding: 82px;
    margin: auto;
    width: 450px;
    background-color: white;
    position: relative;
}

JS:

var buttons = document.getElementsById("container");

button.onclick = onbuttonclicked;

function onbuttonclicked(){
    if (onbuttonclicked) {
        button1.style.backgroundColor = "red";
        button1.disabled=true;
    } else {
        button1.style.backgroundColor = "green";
        button1.disabled=false;
      }
    }

enter image description here

so like here each button has its own text and color

Upvotes: 1

Views: 9635

Answers (7)

Da Mahdi03
Da Mahdi03

Reputation: 1608

So for this you are trying to manipulate the DOM using JavaScript, take your div#container and you are trying to append three button elements. The process for doing this (or really any HTML Element with JS DOM manipulation is fairly similar, you create the element, add the attributes you want, and then "append" it to the main element where you want it inserted) Check out my example below to add 3 buttons to your <div id="container">:

var container = document.querySelector("#container"); //or use document.getElementById("container"), makes no difference
for (var i = 0; i < 3; i++) {
    var button = document.createElement("button"); //works with any HTML5 element
    button.setAttribute("attribute", "value"); //Use this to add attributes such as id, class, styles, or even event listeners like onclick
    button.innerHTML = "Button Text"; //Make sure to add button text if you don't want an empty button!!
   container.appendChild(button);
}

Since you said you want the buttons next to each other (I'm assuming this means side-by-side) then you can add a style to your CSS

button {
    display: inline;
}

but of course that would depend on your usage, meaning if you wanted all buttons to be inline. If you wanted just those three then you can use the .setAttribute("class", "classname"); to add a class and then define that class to have the same style.

You can also make your container a CSS flexbox and have each of the buttons aligned horizontally

#container {
    display: flexbox;
    flex-direction: row; /*Use row for horizontal, column for vertical*/
}

and you wouldn't need to style your buttons. But the choice is yours.

Edit: to make 2 buttons, one green and one red,

//Make a green text button1
var button1 = document.createElement("button"); //works with any HTML5 element
button1.style.color = "green";
button1.innerHTML = "Button1 Text"; //Make sure to add button text if you don't want an empty button!!
container.appendChild(button1);
//Make a red text button2
var button2 = document.createElement("button"); //works with any HTML5 element
button2.style.color = "red";
button2.innerHTML = "Button2 Text"; //Make sure to add button text if you don't want an empty button!!
container.appendChild(button2);

If you wanted to change the background colors as well you could add button.style.backgroundColor = "pink" or whatever color you'd like

Check out: JavaScript DOM Methods, this was a REAL help to me when I was learning what you're trying to do right now!

To give the buttons a function use the onclick value of the button, so in the above script we can add something like this:

button1.onclick = button1AfterClicked;
//Or
button1.setAttribute("onclick", "button1AfterClicked");

And since JavaScript is pretty lenient we can define our button1AfterClicked() anywhere

function button1AfterClicked() {
    button1.style.color = "some color";
    //And so forth...
}

For these kinds of questions I highly suggest looking up the answer on google because I know W3Schools does a splendid job on explaining the basics and more: OnClick Event JavaScript

Upvotes: 0

Emiel Zuurbier
Emiel Zuurbier

Reputation: 20934

This is an example where three buttons are created and styled with CSS. They use the nth-of-type() and attribute selectors to style the buttons based on their position and disabled state.

Do note that when disabling the buttons they won't listen to the click event anymore. 

const container = document.getElementById('container');

for (let i = 0; i < 3; i++) {
  const button = document.createElement('button');
  button.textContent = `Button ${i + 1}`;
  container.append(button);
}

container.addEventListener('click', event => {
  const { target } = event;

  if (!target.tagName.toLowerCase() === 'button') {
    return;
  }

  if (!target.disabled) {
    target.disabled = true;
  } else {
    target.disabled = false;
  }
});
#container {
  display: flex;
}

#container button {
  padding: 15px;
  color: white;
}

#container button:first-of-type {
  background-color: red;
}

#container button:nth-of-type(2) {
  background-color: blue;
}

#container button:last-of-type {
  background-color: goldenrod;
}

#container button[disabled] {
  background-color: black;
}
<div id="container"></div>

Upvotes: 0

AdityaDees
AdityaDees

Reputation: 1047

var container = document.querySelector("#container"); 
var arr = ['success','danger','warning'];
for (var i = 0; i < 3; i++) {
    var button = document.createElement("button"); 
    button.setAttribute("attribute", arr[i]); 
    button.innerHTML = arr[i]; 
    button.className += arr[i];
    container.appendChild(button);
    console.log(button)
}
html{
    background-color: grey;
}

#container{
    top: 10px;
    padding: 82px;
    margin: auto;
    width: 450px;
    background-color: white;
    position: relative;
}

btn {
    border: none;
    background-color: inherit;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
}

.success {
    color: black;
    background:green;
}

.success:hover {
    background-color: #4CAF50;
    color: white;
}

   
.warning {
    background: yellow;
    color:black;
}

.warning:hover {
    background: #ff9800;
    color: white;
}

.danger {
    background: red;
    color:black;
}

.danger:hover {
    background: #f44336;
    color: white;
}
<body>
  <div id="container"></div>
  <script src="button.js"></script>
</body>

I think like this?

Upvotes: 3

Vince
Vince

Reputation: 869

The code provided is all you needed for your current project You can add the style of the button in CSS

// container of buttons
const containerBtn = document.querySelector('.container');

let createBtns = (classParam, text) => {
  let btn = document.createElement('button');
  btn.classList.add(classParam);
  btn.innerText = text;
  containerBtn.append(btn);
  return btn;
};

// 1. add the button **class**
// 2. add the button text

let btn1 = createBtns('btn-1', 'test');

// add event listener to btn1
btn1.addEventListener('click', () => {
  console.log(1);
});

Upvotes: 0

Justaus3r
Justaus3r

Reputation: 423

Following is what might help you,you can set margin and padding to your needs:

var button = document.createElement("button");
button.innerHTML = "Do Something";
var body = document.getElementsByTagName("body")[0];
body.appendChild(button);
button.addEventListener ("click", function() {
alert("did something");
});

Upvotes: 0

user14922462
user14922462

Reputation:

You Can do it with jquery check is this right ?

$("#container").html('<button class="green-button">Button1</button><button class="red-button">Button2</button><button class="yellow-button">Button3</button>');

$( ".red-button" ).click(function() {
 $(".red-button").css("background-color", "red");
});


$( ".green-button" ).click(function() {
 $(".green-button").css("background-color", "green");
});

$( ".yellow-button" ).click(function() {
 $(".yellow-button").css("background-color", "yellow");
});
 <div id="container"></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

Upvotes: 0

Wais Kamal
Wais Kamal

Reputation: 6180

Create the buttons and append them as children of your buttons container. Here I am creating one button. You can do the same for other buttons:

var buttons = document.getElementById("container");
var button1 = document.createElement("button");
button1.onclick = onbuttonclicked;
buttons.appendChild(button1);

function onbuttonclicked() {
  if (onbuttonclicked) {
    button1.style.backgroundColor = "red";
    button1.disabled = true;
  } else {
    button1.style.backgroundColor = "green";
    button1.disabled = false;
  }
}

Note that onbuttonclicked will always evaluate to true because you are checking whether the function is defined or not. Also, if you want to change the background and disabled attribute of the clicked button, rather than button1 explicitly, you should use this instead of button1.

Upvotes: 3

Related Questions