最近剛開始學js,希望在input輸入框輸入顏色並按下送出按鈕之後可以同時把輸入框上面文字跟底下長方形圖案的顏色改成輸入的顏色,結果用input.value時,console出來會是undefind,可以請問是錯在什麼地方嗎??
這是我的程式碼
<html>
<head>
<meta charset="utf-8">
<script>
function getcolor(){
var input=document.getElementsByTagName("input");
var p_color=document.getElementById('p_color');
var div_color=document.getElementById('div_color');
var str='';
var inputvalue=input.value;
str=inputvalue;
console.log(str)
p_color.style.color=str;
}
</script>
</head>
<body>
<p id='p_color' >請輸入顏色</p>
<input type="text">
<button onclick="getcolor()">顯示訊息</button>
<div id=div_color style="height: 100px; width: 100%;background-color:rgb(158, 155, 155);"></div>
</body>
</html>
方法
getElementsByTagName
回傳的結果是元素的集合。
var input = document.getElementsByTagName('input')[0];
只要讀取第 0
個位置就能取得 input
元素了。
題外話,如果只要取得網頁中的單一元素,建議您使用 getElementById
或 querySelector
等方法會比較好。
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id='p_color' >請輸入顏色</p>
<input type="text" id='color'>
<button onclick="getcolor()">顯示訊息</button>
<div id=div_color style="height: 100px; width: 100%;background-color:rgb(158, 155, 155);"></div>
</body>
</html>
function getcolor(){
var input=document.getElementById("color");
var p_color=document.getElementById('p_color');
var div_color=document.getElementById('div_color');
console.log(input.value)
p_color.style.color=input.value;
div_color.style.backgroundColor=input.value;
}
如果抓單一元素,建議還是給個id來抓會比較快