如何通過點擊復選框元素使用切換來改變文本 -有解無憂

在這個動態Web應用程式中，如何通過點擊復選框將文本從標題元素的顏色改為標題元素的非顏色，并通過toggle方法在Javascript代碼中實作該文本。

預期的輸出是：

Toggle Image

。

let myContainer = document. getElementById("myContainer"/span>)。

function onTextAndColorChange（checkboxInput, labelId, headingId） {
    let checkboxElement = document.getElementById("checkboxInput") 。
    console.log（checkboxElement.checked）。
    
    let labelElement = document.getElementById("labelId") 。
    /* 我認為這里實作了切換方法*/。
    
    let headingElement = document.getElementById(" headingId")。
    headingElement.classList.toggle("checked") 。
    
    
    
}



let inputElement = document.createElement（"input"）。
inputElement.type = "checkbox"。
inputElement.id = "checkboxInput"。
inputElement.onclick = function（）{
    onTextAndColorChange（checkboxInput, labelId, headingId）。
};
myContainer.appendChild（inputElement）。

let labelElement = document.createElement("label") 。
labelElement.setAttribute("for", "checkboxInput") 。
labelElement.textContent = "標題元素的顏色"。
labelElement.id = "labelId"。
myContainer.appendChild（labelElement）。

let headingElement = document.createElement("h1") 。
headingElement.textContent = "標題元素"。
headingElement.classList.add(" heading")。
headingElement.id = " headingId"。
myContainer.appendChild( headingElement);

@import url("https://fonts.googleapis.com/css2? family=Bree Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair Display SC:ital,wght@0,400;0,700;1,700&；family=Playfair Display。 ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source Sans Pro:ital,wght@0,400;0,700;1,700&family=Work Sans:ital,wght@0,400;0,700;1,700&display=swap");

.checked {
    color: #7a0ecc;
    background-color: #f2ebfe;
}

<!DOCTYPE html> 
<html> 

<head></head> 

<body> 
    <div id="myContainer"/span>> </div>>
</body> 

</html>/span>

uj5u.com熱心網友回復：

使用textContent屬性來改變函式中的標簽文本：

labelElement.textContent = checkboxElement.checked? 
    ? "取消標題元素的顏色" ? 
    : "給標題元素著色"。

作業片斷

。

let myContainer = document. getElementById("myContainer"/span>)。

function onTextAndColorChange（checkboxInput, labelId, headingId） {
    let checkboxElement = document.getElementById("checkboxInput") 。
    console.log（checkboxElement.checked）。
    
    let labelElement = document.getElementById("labelId"/span>)。
    labelElement.textContent = checkboxElement.checked? 
        ? "取消標題元素的顏色" ? 
        : "給標題元素著色"。
    
    let headingElement = document.getElementById(" headingId") 。
    headingElement.classList.toggle("checked") 。
   
}

let inputElement = document.createElement（"input"）。
inputElement.type = "checkbox"。
inputElement.id = "checkboxInput"。
inputElement.onclick = function（）{
    onTextAndColorChange（checkboxInput, labelId, headingId）。
};
myContainer.appendChild（inputElement）。

let labelElement = document.createElement("label") 。
labelElement.setAttribute("for", "checkboxInput") 。
labelElement.textContent = "標題元素的顏色"。
labelElement.id = "labelId"。
myContainer.appendChild（labelElement）。

let headingElement = document.createElement("h1") 。
headingElement.textContent = "標題元素"。
headingElement.classList.add(" heading")。
headingElement.id = " headingId"。
myContainer.appendChild( headingElement);

@import url("https://fonts.googleapis.com/css2? family=Bree Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair Display SC:ital,wght@0,400;0,700;1,700&；family=Playfair Display。 ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source Sans Pro:ital,wght@0,400;0,700;1,700&family=Work Sans:ital,wght@0,400;0,700;1,700&display=swap");

.checked {
    color: #7a0ecc;
    background-color: #f2ebfe;
}

<!DOCTYPE html> 
<html> 

<head></head> 

<body> 
    <div id="myContainer"/span>> </div>>
</body> 

</html>/span>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/320416.html

標籤：

上一篇：堆疊是如何區分不同的數字型別的？

下一篇：如何在選擇選項后顯示所選選項