html - 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;
      }
    }

so like here each button has its own text and color

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;
      }
    }

so like here each button has its own text and color

Share Improve this question edited Jan 4, 2021 at 9:40 asked Jan 4, 2021 at 9:08 user14541933

1 What do you mean by "I want to make the 3 buttons without changing the html so make it dynamic inside the javascript."? Also, Elements in var buttons = document.getElementsById("container"); should not have an "s", as an ID can only be assigned to one element – Sal Commented Jan 4, 2021 at 9:11
i did add a small example image to it, like the background of the page is grey and there a little white block on the page, inside that white block i want to place 3 buttons – user14541933 Commented Jan 4, 2021 at 9:16
Yeah but I'm confused as to why you aren't putting 3 button elements in the HTML – Sal Commented Jan 4, 2021 at 9:17
The if statement in onbuttonclicked will always be true, as you're checking the value of the function, which is truthy. Instead you might want to evaluate the disabled property or the backgroundColor of the button. – Emiel Zuurbier Commented Jan 4, 2021 at 9:18

Add a ment |

7 Answers 7

Sorted by: Reset to default 3

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.

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?

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

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./jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

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");
});

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);
});

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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - make buttons in javascript - Stack Overflow

7 Answers 7

与本文相关的文章

评论列表(0)