如何用JavaScript中的按鈕單擊來更改css類？

我很困惑我在做什麼錯在這裏我跟着一個教程，它適用於他們，但不是我。我已經切換了很多東西來試圖找到問題，但它似乎並不奏效。如何用JavaScript中的按鈕單擊來更改css類？

HTML

<h1 class="settingOne" id="mainText">Simple HTML Page</h1> 
    <p class="center"> 
     This is a very simple HTML page. 
    </p> 

    <p class="center">It's about as basic as they come. It has: </p> 

    <ul class="center"> 
     <li>An H1 Tag</li> 
     <li>Two paragraphs</li> 
     <li>An unordered list</li> 
    </ul> 

    <button id="changeButton"> 
     <p> 
      Hey push this to change the header thing 
     </p> 
    </button>

CSS

.settingOne { 
    font-family: fantasy; 
    color: blue; 
    text-align: center; 
} 

.settingTwo { 
    font-family: serif; 
    color: red; 
    text-align: center; 
}

JAVASCRIPT

function changeClass() { 
    document.getElementById("changeButton").onclick = function() { 
     if (document.getElementById("mainText").className === "settingOne") { 
      document.getElementById("mainText").className = "settingTwo"; 
     } else { 
      document.getElementById("mainText").className === "settingOne"; 
     } 
    }; 
} 

window.onload = function() { 
    preparePage(); 
}

;

來源

2016-02-22 cosmichero2025

你是不是要求您onload處理中的函數調用 –

changeClass（）。（什麼是從onload調用但未顯示的preparePage（）。） – nnnnnn

'document.getElementById（「mainText」）。className ===「settingOne」;' 您應該爲此行分配值，其他聲明，而不是檢查 –

目前尚不清楚，如果你changeClass功能是不斷調用。我提供了一個示例，通過將第一個查詢存儲到變量ele中的元素changeButton，然後在發生window.onload事件時註冊點擊處理程序，從而清理您的代碼。您當然可以將其全部包裝在另一個名爲registerHandlers的函數中，或者將其放入您的preparePage函數中。

window.onload = function() { 
    var ele = document.getElementById("changeButton"); 
    ele.onclick = function() { 
     if(ele.className === "settingOne") { 
      ele.className = "settingTwo"; 
     } else { 
      ele.className = "settingOne"; 
     } 
    }; 
};

來源

2016-02-22 00:45:31 ThisClark

當我使用它改變了觸發onClick的東西的文本，但我添加了另一個變量，連接到h1標籤我想改變移動了一些東西，並在那裏興旺起來。謝謝：D和Sry有關這個問題不是描述性的我仍然習慣堆棧溢出和JavaScript。 – cosmichero2025

在JavaScript中，線

else { document.getElementById("mainText").className === "settingOne"; }

應改爲

else { document.getElementById("mainText").className = "settingOne"; }

單=用來設置一兩件事等於另一個，這是你想要在這裏的行爲。

工作例如：https://jsfiddle.net/w6no44v1/20/

來源

2016-02-22 00:37:39 hxlnt

我做了你說的和你的權利這是錯誤的....不知道我是如何錯過了。它沒有解決問題，雖然上面的評論中有人告訴我調用changeClass函數但不知道從哪裏來，但我是新手，所以我只是在測試水域。哦，我擺脫了preparePage（） – cosmichero2025

只需添加一個帶有示例代碼的JSFiddle鏈接給你！讓我知道這是否有幫助。 :) – hxlnt

還請務必記下你的Javascript放置在哪裏 - 它在你的HTML文件的或結尾？你沒有在你的問題中指定，但這個例子的位置確實很重要。（在我的JSFiddle示例中，它在本體中。）快樂編碼！ – hxlnt

如何用JavaScript中的按鈕單擊來更改css類？

回答

相關問題