JS實現input賦值

一、常規賦值方法

在JS中，我們一般使用document.getElementById()方法獲取input元素，然後使用value屬性進行賦值。

    <input type="text" id="myInput">

    <script>
        var input = document.getElementById("myInput");
        input.value = "Hello World";
    </script>

以上代碼通過獲取id為myInput的input元素，然後使用value屬性將值賦為”Hello World”。

我們也可以在方法調用中直接給出值，如：

    <input type="text" id="myInput">

    <script>
        document.getElementById("myInput").value = "Hello World";
    </script>

二、通過事件觸發賦值

除了直接通過JS代碼賦值，我們也可以通過事件觸發實現input賦值。

比如，我們給一個button添加onclick事件，在事件中通過value屬性獲取輸入的內容，並將其賦給指定的input：

    <input type="text" id="myInput">
    <button onclick="setValue()">提交</button>

    <script>
        function setValue(){
            var input = document.getElementById("myInput");
            var value = document.getElementById("text").value;
            input.value = value;
        }
    </script>

以上代碼通過給button添加onclick事件，將value屬性賦值為text輸入框輸入的值。

三、通過函數返回值賦值

除了直接通過賦值或事件觸發進行input賦值，我們還可以通過函數返回值來實現：

    <input type="text" id="myInput">

    <script>
        function getValue(){
            return "Hello World";
        }

        document.getElementById("myInput").value = getValue();
    </script>

以上代碼通過定義一個返回值為”Hello World”的函數getValue()，然後將其返回值賦給id為myInput的input元素的value屬性。

四、JSON對象賦值

在實際應用中，我們一般會通過JSON對象進行數據傳遞和賦值。例如：

    <input type="text" id="myInput">

    <script>
        var data = {
            name: "Mike",
            age: 25,
            hobby: "swimming"
        };

        document.getElementById("myInput").value = data.name;
    </script>

以上代碼定義了一個包含姓名、年齡和愛好的JSON對象data，然後將其name屬性的值賦給id為myInput的input元素的value屬性。

五、動態賦值

除了靜態賦值外，我們還可以通過JS動態生成input元素並進行賦值：

    <div id="myDiv"></div>
    <button onclick="addInput()">添加</button>

    <script>
        function addInput(){
            var input = document.createElement("input");
            input.type = "text";
            input.value = "Hello World";
            document.getElementById("myDiv").appendChild(input);
        }
    </script>

以上代碼通過定義一個addInput()函數，生成一個input元素並將其賦值為”Hello World”，最後通過appendChild()方法將其添加到具有id為myDiv的div元素中。