在 javascript 中制作按鈕
[英]make buttons in javascript
問題描述
在我的 HTML 中，我放了一個腳本和一個 div。 現在我想在頁面中間的while塊中制作 3 個彼此相鄰的按鈕。 我想在不更改 html 的情況下制作 3 個按鈕，從而使其在 javascript 內動態化。
到目前為止，我已經在 javascript 中放置了一個var ，但我現在不知道該怎么做..
我之前制作了一個 html 頁面，其中有一個按鈕元素，然后使用 html 更改所有頁面，但如果 ZFC35FDC70D5FC69D269883A822C 頁面內沒有按鈕元素，我無法弄清楚如何執行此操作。
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;
}
}
所以就像這里每個按鈕都有自己的文本和顏色
7 個解決方案
解決方案1
2 2021-01-04 09:13:31
創建按鈕並將 append 作為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;
}
}
請注意， onbuttonclicked將始終評估為 true，因為您正在檢查 function 是否已定義。 此外，如果您想更改單擊按鈕的背景和禁用屬性，而不是顯式更改button1 ，則應使用this而不是button1 。
解決方案2
2 2021-01-04 09:46:46
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>
我是這樣想的？
解決方案3
0 已采納 2021-01-04 09:21:16
因此，為此，您嘗試使用 JavaScript 操作 DOM，使用div#container並嘗試使用append三個button元素。 執行此操作的過程（或者實際上任何具有 JS DOM 操作的 HTML 元素都非常相似，您創建元素，添加所需的屬性，然后將其“附加”到您想要插入的主元素）查看我的示例下面為您的<div id="container">添加 3 個按鈕：
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);
}
既然您說您希望按鈕彼此相鄰（我假設這意味着並排），那么您可以為您的 CSS 添加樣式
button {
display: inline;
}
但這當然取決於您的使用情況，這意味着您是否希望所有按鈕都是inline 。 如果您只想要這三個，那么您可以使用.setAttribute("class", "classname"); 添加一個 class ，然后將 class 定義為具有相同的樣式。
您還可以使您的容器成為 CSS flexbox 並使每個按鈕水平對齊
#container {
display: flexbox;
flex-direction: row; /*Use row for horizontal, column for vertical*/
}
並且您不需要設置按鈕樣式。 但選擇權在你。
編輯：制作 2 個按鈕，一個綠色和一個紅色，
//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);
如果您想更改背景 colors 也可以添加button.style.backgroundColor = "pink"或任何您想要的顏色
查看： JavaScript DOM 方法，當我學習你現在正在嘗試做的事情時，這對我來說是一個真正的幫助！
為了給按鈕一個 function 使用按鈕的 onclick 值，所以在上面的腳本中我們可以添加如下內容：
button1.onclick = button1AfterClicked;
//Or
button1.setAttribute("onclick", "button1AfterClicked");
由於 JavaScript 非常寬松，我們可以在任何地方定義我們的button1AfterClicked()
function button1AfterClicked() {
button1.style.color = "some color";
//And so forth...
}
對於這類問題，我強烈建議在谷歌上查找答案，因為我知道 W3Schools 在解釋基礎知識等方面做得非常出色： OnClick Event JavaScript
解決方案4
0
你可以用 jquery 檢查這是對的嗎？
$("#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>解決方案5
0 2021-01-04 09:24:51
以下可能對您有所幫助，您可以根據需要設置邊距和填充：
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");
});
解決方案6
0 2021-01-04 09:34:00
提供的代碼是您當前項目所需的全部您可以在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);
});
解決方案7
0 2021-01-04 09:47:39
這是一個使用 CSS 創建和設置三個按鈕的示例。 他們使用nth-of-type()和屬性選擇器根據 position 和禁用的 state 設置按鈕樣式。
請注意，當禁用按鈕時，它們將不再監聽點擊事件。
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>
使用Javascript創建新Javascript的按鈕
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.