iT邦幫忙

1

javascript input取value問題

  • 分享至 

  • xImage

最近剛開始學js,希望在input輸入框輸入顏色並按下送出按鈕之後可以同時把輸入框上面文字跟底下長方形圖案的顏色改成輸入的顏色,結果用input.value時,console出來會是undefind,可以請問是錯在什麼地方嗎??https://ithelp.ithome.com.tw/upload/images/20211214/20139313a0kFcl7X4T.jpg
這是我的程式碼

<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 }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

3
Felix
iT邦研究生 2 級 ‧ 2021-12-14 01:05:16
最佳解答

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

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

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

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

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

原來是這樣!感謝解答

2
小山丘
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來抓會比較快

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

了解了~感謝!

我要發表回答

立即登入回答