Question

您好我正在尝试将值传递到我的日历输入框中。 <p>标记中有3个链接，点击后我希望该href中的值作为日历的测试数据进入输入框。目前我尝试将href设置为onClick事件，一旦单击测试日期，它将是函数testData（）。在testData（）函数中，我将它放入以便从href获取值并使用（id = textDate）将其存储到输入框中。然后，当用户点击提交时，日历将在日历上提供正确的信息。日历的工作原理只是将href值传递给输入框，以便测试我遇到的问题。

<!DOCTYPE html>
<html>
<head>
    <style>
        table td{width:25px; background-color: rgba(215, 44, 140, 0.14);}
        table{border:1px solid black;}
        .first{background-color:black; color:white;}
    </style>

    <script>

        function GenerateTable(month, day, year)
        {
            var myMonth = month;
            var myDay = day;
            var myYear = year;
            var myMonthInteger =0;
            var table = "<table><caption>" + myMonth + " " + myYear + "</caption><tr><td></td></tr>";
            var firstDayOfTheMonth = ["Su", "Mo" , "Tu", "We","Th", "Fr", "Sa"];
            var arayMonthDaysAmount = [31,28,31,30,31,30,31,31,30,31,30,31];

            switch(myMonth)
            {
                case "January":
                    myMonthInteger = 0;
                    break;

                case "February":
                    myMonthInteger = 1;
                    break;

                case "March":
                    myMonthInteger  = 2; 
                    break;

                case "April":
                    myMonthInteger = 3;
                    break;

                case "May":
                    myMonthInteger = 4;
                    break;

                case "June":
                    myMonthInteger = 5;
                    break;

                case "July":
                    myMonthInteger = 6;
                    break;

                case "August":
                    myMonthInteger = 7;
                    break;

                case "September":
                    myMonthInteger = 8;
                    break;

                case "October":
                    myMonthInteger = 9;
                    break;

                case "November":
                    myMonthInteger = 10;
                    break;

                case "December":
                    myMonthInteger = 11;
                    break;

                default:
                    myMonthInteger = 1;
                    break;
            }

            var myDate = new Date();
            myDate.setFullYear(myYear);
            myDate.setMonth(myMonthInteger);
            myDay = myDay.replace(',','');
            myDate.setDate(myDay);
            var startDate;
            var myCounter = 0;
            startDate = myDate.getDay();
            var flip = false;

            for(cnt = 0; cnt < 7; cnt++) //ROWS
            {
                table += "<tr>";

                    for(cnter = 0; cnter < 7; cnter++) //COLS
                    {

                        if(cnt == 0)
                        {
                            table += "<td class = \"first\">" + firstDayOfTheMonth[cnter] + "</td>";
                        }
                        else
                        {
                            if(cnter == startDate+1 || flip == true)
                            {
                                flip = true;

                                if(myCounter < arayMonthDaysAmount[myDate.getMonth()])
                                {
                                    myCounter +=1;
                                    table += "<td>" + myCounter + "</td>";
                                }
                                else
                                {
                                    table += "<td></td>";
                                }
                            }
                            else
                            {

                                table += "<td></td>";
                            }
                        }
                    }
                    table += "</tr>";
                }

                table += "</table>";    
                document.getElementById('myTable').innerHTML = table;
            }

        function getMyDate()
        {
            var enteredDate = document.getElementById("textDate").value;
            var myCurrentDateArray = enteredDate.split(" ", 3)
            var myMonth = myCurrentDateArray[0];
            var myDay = myCurrentDateArray[1];
            var myYear = myCurrentDateArray[2];

            GenerateTable(myMonth,myDay,myYear);
        }

        function TestData()
        {

            var test = document.getElementByID("test2").value

            document.getElementById("textDate").value = test;
        }
    </script>
</head>
<body onload = "setMyDefault()">

    <form>
        <legend>Enter a date: (month dd, yyyy)</legend>
        <input id = "textDate" type = "text" value = "November 14, 2014" pattern = "[a-zA-Z]{3,}\s[0-9]{1,2}[,]\s[0-9]{4,4}"/>
        <button type = "button" onClick = "getMyDate()">Generate Calendar</button>
    </form>

    <p>Test Data: <a href = "" onClick = "TestData()" id = "test2" value = "h">Nov 11, 2012</a> | <a href = "" name = "test1" value = "Mar 21, 2012">Mar 21, 2012</a> | <a href = "" name = "test0" value = "Sept 6, 2012">Sep 6, 2012</a></p>
    <div id = "myTable"></div>
</body>
</html>

感谢您的帮助，我希望我能为您提供足够的信息。感谢帮助。

Answer 1

如果您想使用锚标记来触发该功能，您可能需要将href设置为href =“＃”以阻止标记导航到其他页面或刷新当前页面。要定位元素，您可以使用多种方法。如果您想要定位特定元素，则可以使用

document.getElementById("test2").innerHTML;

document.getElementById（“test2”）。innerHTML将定位该标记内的内容。

document.getElementById（“test2”）。value将定位标签的value属性。

如果您希望您的功能由多个元素运行，那么我建议使用

<a href = "#" onClick = "TestData2(event)"

-

   function TestData(e)
    {
        var YourResult=e.target.innerHTML;
    }

Demo JSBin

Javascript将字符串值从标记传递到输入框

1 个答案: