javascript input取value問題

#js #value

cashrain 2021-12-14 00:27:13 ‧ 2959 瀏覽

分享至

最近剛開始學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>

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

Felix

iT邦研究生 2 級 ‧ 2021-12-14 01:05:16

最佳解答

方法 getElementsByTagName 回傳的結果是元素的集合。

var input = document.getElementsByTagName('input')[0];

只要讀取第 0 個位置就能取得 input 元素了。

題外話，如果只要取得網頁中的單一元素，建議您使用 getElementById 或 querySelector 等方法會比較好。

回應 1
分享
檢舉

cashrain iT邦新手 5 級 ‧ 2021-12-14 09:40:27 檢舉

原來是這樣！感謝解答

登入發表回應

小山丘

iT邦新手 2 級 ‧ 2021-12-14 09:01:12

<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來抓會比較快