javascript - 无法传递值以在Jquery中显示

我是Jquery的新手。我尝试了这些编码，但是当它没有显示出我输入的内容时却没有成功，并且仅当我键入任何单词时才显示“未定义”。只是想知道是什么原因。

    function myFunction() {
        $("button").click(function(){
            $("#h01").val();
            $("#h02").val($('#h01').val());
        });

        //$("#h02").attr("style","color:black;font-size:15px").html("Hello jQuery")
    }

    function iwanttochangecolor() {
        if (i>2){
            i=0;
        }

        $("#h02").attr("style","color:"+arraycolor[i]+";"+"font-size:"+arraysize[i])
        //$("#h01").attr("style","font-size:"+arraysize[i]);
        i++;
    }

    function copyText2() {
        h01 = document.getElementById("h01");
        h02 = document.getElementById("h02");
        h02.value = h01.value;
    }


    $(document).ready(myFunction);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h1 id="h01"></h1>
    <p>Input: <input type="text" name="" id="h01" onkeyUp="copyText2()"></p>
    <p>Your input:<input type="text" name="" id="h02" ></p>
    <input type="button" value="Change Color" onclick="iwanttochangecolor()">

最佳答案

有一些原因会破坏代码：


您的代码上没有按钮，因此$("button").click(function(){应该更改为$('input[type="button"]')。
<h1 id="h01"></h1>和<input type="text" name="" id="h01" onkeyUp="copyText2()">具有相同的id h01，更改一个。
将i初始化为0，因为undefined + 1是NaN，而NaN + 1仍然是NaN。最好使用var声明它，而不是使其成为window的属性。


修复它们，您的代码应该可以工作。

function myFunction() {
        $('input[type="button"]').click(function(){
            $("#h01").val();
            $("#h02").val($('#h01').val());
        });

        //$("#h02").attr("style","color:black;font-size:15px").html("Hello jQuery")
    }
    // Fake values. as you use magic number 2, create size 3 array here.
    var arraycolor = ['red', 'blue', 'green'];
     var arraysize = ['small', 'medium', 'large'];
    // Good practice.
    var rotateLength = arraycolor.length;

    // Init i before use.
    var i = 0;
    function iwanttochangecolor() {
        // Should
        if (i>2){   // Good practice: use i < rotateLength here
            i=0;
        }

        $("#h02").attr("style","color:"+arraycolor[i]+";"+"font-size:"+arraysize[i])
        //$("#h01").attr("style","font-size:"+arraysize[i]);
        i++;
    }

    function copyText2() {
        // Don't make the h01, h02 become global variable, add var.
        var h01 = document.getElementById("h01");
        var h02 = document.getElementById("h02");
        h02.value = h01.value;
    }


    $(document).ready(myFunction);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h1 id="h01h1"></h1>
    <p>Input: <input type="text" name="" id="h01" onkeyUp="copyText2()"></p>
    <p>Your input:<input type="text" name="" id="h02" ></p>
    <input type="button" value="Change Color" onclick="iwanttochangecolor()">