我在replit.com 上做了一些 HTML 代碼。
如果我問的問題很愚蠢,請原諒我,因為我是 HTML 和 JS 的新手。
我希望用戶在輸入欄位中輸入一些內容,然后單擊“單擊我”按鈕。我希望按鈕將其文本更改為用戶輸入的任何內容。但相反,它只是一片空白。
這是我的代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<label for="text">Type Some Text:</label><br>
<input type="text" id="type" name="text"><br><br>
<button type="button" style="background-color: khaki; margin-left: 20px; padding-left: 30px; border: solid 5px; border-radius: 40px; padding-right: 450px; font-size: 18px" onclick="Click()" id="click">Click Me!</button>
<script>
function Click() {
text = document.getElementById("type").innerHTML;
document.getElementById("click").innerHTML = text;
}
</script>
</body>
</html>
uj5u.com熱心網友回復:
https://codepen.io/jacobcambell/pen/OJjyoWW
這里需要考慮一些事情。
首先,要獲取 HTML 輸入的值,您需要使用.value代替.innerHTML,例如:
text = document.getElementById("type").value;
接下來,(可選)您可以呼叫alert()而不是window.alert()大多數瀏覽器都知道如何正確處理它。
最后,要更改您的按鈕,您需要將按鈕的 innerHTML 設定為您的text變數,現在您只需將其設定"text"為string與 JavaScript 中的which is a相等。你實際上是讓你的按鈕說“文本”
另外,我建議使用let在這里宣告您的變數。
您的Click函式的最終版本可能如下所示:
function Click() {
let text = document.getElementById("type").value;
alert(text)
document.getElementById("click").innerHTML = text;
}
uj5u.com熱心網友回復:
用這個:
function Click() {
text = document.getElementById("type").value;
document.getElementById("click").innerHTML = text;
}
此外,您還可以使用這個:
function Click() {
document.getElementById("click").innerHTML = document.getElementById("type").value
}
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/334590.html
標籤:javascript html 按钮 输入
