在 JavaScript 中切換按鈕

Ammar Ali 2021年10月2日
在 JavaScript 中切換按鈕

本教程將討論如何使用 JavaScript 中的條件語句來切換按鈕。

在 JavaScript 中使用條件語句切換按鈕

我們可以使用條件語句來切換按鈕,比如 JavaScript 中的 if-else 語句。我們可以在 JavaScript 中切換元素的幾乎所有屬性,比如它的值、類、id 和顏色。

要更改元素的任何屬性,我們需要使用其 id 或類來獲取元素。此外,使用屬性名稱,我們可以更改屬性值。

例如,讓我們製作一個按鈕並使用 if-else 語句和 value 屬性更改其內部文字。請參考下面的程式碼。

<!DOCTYPE html>
<html>
<head></head>
<body>
<form>
<input type="button" id="myButton" value="NO"
       onclick="Buttontoggle();">
</form>
</body>
<script type="text/javascript">
function Buttontoggle()
{
  var t = document.getElementById("myButton");
  if(t.value=="YES"){
      t.value="NO";}
  else if(t.value=="NO"){
      t.value="YES";}
}
</script>
</html>

在上面的程式中,我們建立了 Buttontoggle() 函式,每次使用者點選按鈕時都會呼叫該函式。它將切換按鈕內的文字。

要執行此程式碼,你需要將此程式碼複製到一個 HTML 檔案中並使用任何瀏覽器開啟該檔案,你將看到該按鈕。以同樣的方式,我們可以切換元素的任何屬性。我們也可以使用 switch 語句代替 if-else 語句。現在,讓我們使用按鈕和 if-else 語句來切換文字。請參考下面的程式碼。

<!DOCTYPE html>
<html>
<head></head>
<body>
<button onclick="Buttontoggle()">Click to Toggle Text</button>

<div id="123">Some Text</div>
</body>
<script type="text/javascript">
function Buttontoggle()
{
  var t = document.getElementById("123");
  if(t.innerHTML=="Some Text"){
      t.innerHTML="Toggled Text";}
  else{
      t.innerHTML="Some Text";}
}
</script>
</html>

在上面的程式碼中,我們使用了一個按鈕來使用另一個元素的 id 來切換它的文字。getElementById 屬性用於使用元素的 id 獲取元素,而 innerHTML 屬性用於獲取 div 元素的文字。我們還可以使用 classList.toggle() 屬性切換元素的類。

例如,讓我們建立一個文字元素和一個樣式表,我們將在其中設定一些類 myClass 屬性,例如寬度、填充、背景顏色、顏色和字型大小。現在我們可以使用 myClass 類和 classList.toggle() 屬性來切換 div 元素的類。請參考下面的程式碼。

<!DOCTYPE html>
<html>
<head></head>
<body>
<button onclick="Buttontoggle()">Click to Toggle Class</button>

<div id="123">Some Text</div>
</body>
<style type="text/css">
.myClass {
  width: 50%;
  padding: 33px;
  background-color: green;
  color: white;
  font-size: 33px;
}
</style>
<script type="text/javascript">
function Buttontoggle()
{
  var t = document.getElementById("123");
  t.classList.toggle("myClass");
}
</script>
</html>

在上面的程式中,我們建立了一個用於切換類的按鈕和一個將切換類的 div 元素。我們使用樣式表來設定類的一些屬性,當點選切換按鈕時,這些屬性將應用於文字。

Author: Ammar Ali
Ammar Ali avatar Ammar Ali avatar

Hello! I am Ammar Ali, a programmer here to learn from experience, people, and docs, and create interesting and useful programming content. I mostly create content about Python, Matlab, and Microcontrollers like Arduino and PIC.

LinkedIn Facebook

相關文章 - JavaScript Button