如何制作從大寫變為小寫的單個按鈕

Question

我的任務是創建一個按鈕，將文本輸入框中的文本更改為 html 和 javascript 中的全部大寫和全部小寫。 當頁面重新加載時，它會回到文本條目的默認值。 按鈕名稱也應該在單擊時更改（例如，當單擊按鈕並且文本現在全部大寫時，按鈕名稱應更改為“lower”，這樣當您單擊它時，它會將文本更改回更低。並且一旦在較低的按鈕名稱應更改為“UPPER”）。 按鈕也應該居中，我們應該在 javascript 中創建一個 function 來執行此操作。 這是我的文本輸入框的 html 代碼：

<p align="center" style="font-weight: normal;"> Question: <input type="text" name="URL" value="Where will the URL be displayed?" size=30 readonly> </p>

這是我到目前為止的按鈕代碼（我還沒有 function 名稱，我還不確定要為該值添加什么）：

 <p align="center" style="font-weight: normal;"> <input type="button" value="???" name="uplow" onClick="function_name();" </p>

我對任何答案都持開放態度，感謝您的幫助！！！

Answer 1

您可以根據需要更改按鈕文本和輸入值。

您可以使用此value屬性來get和set任何輸入的屬性。

您可以使用元素的style屬性將按鈕文本更改為uppercase和lowercase 。

我將按鈕名稱用作send ，您可以使用任何名稱。

 let isUpper = false; const questionInput = document.querySelector('input[type=text]'); const button = document.querySelector('input[type=button]'); // Default condition, so make the button text to uppercase button.style.textTransform = 'uppercase'; button.addEventListener('click', function(e) { if (isUpper) { e.target.style.textTransform = 'uppercase'; questionInput.value = questionInput.value.toLowerCase(); } else { e.target.style.textTransform = 'lowercase'; questionInput.value = questionInput.value.toUpperCase(); } isUpper =;isUpper; })

 <p align="center" style="font-weight: normal;"> Question: <input type="text" name="URL" value="Where will the URL be displayed?" size=30 readonly> </p> <p align="center" style="font-weight: normal;"> <input type="button" value="send" name="uplow" /> </p>