Question

我试图使javascript从文本框中获取价值并发出警报，但它始终弹出“未定义”。我尝试从组合框中获取所选项目的值，但仍显示未定义。当我尝试在简单网页中使用js时，它可以工作。我的代码可能有问题。

注意：我希望单击“时间表”按钮时弹出该值。 Js将从txtbox中获取值并选择时间值。但这不是。

代码：index.php

    <!DOCTYPE html>
    <html lang='en'>
    <head>
        <title>Pinterest Grabber</title>
        <style>
            html, body{
                width: 100%;
                background-color: #DADADA;
                color: black;
                font-family: georgia, sans-serif, arial;
            }

        .container{
            background-color: white;
            width: 95%;
            margin: auto;
            padding: 10px;
            box-shadow: 0px 5px 10px #333;
            border: none;
            border-radius: 2px;
        }

        .setupForm{
            background-color: #ff9;
            margin: 10px;
        }

        .pinterestForm{
            background-color: #ff9;
            margin-top: 2%;
        }

        .formTxtbox{
            margin-bottom: 1%;
            border: none;
            width: 75%;
            text-align: center;
            font-size: 17px;
            height: 30px;
            background-color: white;
            color: black;
            transition-property: box-shadow;
            transition-duration: 0.3s; 
        }

        .formTxtbox:hover{
            box-shadow: 0px 0px 10px #cab;
        }

        .formButton{
            margin-bottom: 1%;
            border: none;
            background-color: royalblue;
            color: white;
            padding: 7px 35px;
            font-size: 17px;
            transition-property: background-color, box-shadow, color;
            transition-duration: 0.3s; 
        }

        .formButton:hover{
            background-color: lime;
            box-shadow: 5px 5px 5px black;
            color: black;
            cursor: pointer;
        }

        .txtboxSmall{
            margin-bottom: 1%;
            border: none;
            width: 50%;
            text-align: center;
            font-size: 17px;
            height: 30px;
            background-color: white;
            color: black;
            transition-property: box-shadow;
            transition-duration: 0.3s; 
        }

        .txtboxSmall:hover{
            box-shadow: 0px 0px 10px #cab;
        }

        .scheduleContainer{
            background-color: #FF9800;
        }

        #scheduleOptions{
            border: none;
            width: 5%;
            height: 30px;
        }

    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $('.setupForm').hide();

        $("#btnSettingsToggle").click(function(){
            $(".setupForm").toggle('fast');
        });

    });

    // js
    var interval;
    var time = document.getElementById('txtScheduleInterval').value;
    var timeOptions = document.getElementById("scheduleOptions").value;

    function schedule()
    {
        alert(time);
    }

    </script>
</head>
<body>
    <div class="container">
        <header>
            <h1 align="center">Pinterest Grabber</h1>
        </header>

        <button class="formButton" id="btnSettingsToggle">Settings</button>

        <center>
        <form action="setup.php" method="post" class="setupForm">
            <h2>Settings</h2>
            <input class="formTxtbox" type="text" name="condapath" placeholder="Your Anaconda Path"><br>
            <input class="formTxtbox" type="text" name="envname" placeholder="Enviroment Name To Activate"><br>
            <input class="formButton" type="submit" value="Save Settings">
        </form>
        </center>
        <?php
            $settings = file('settings.txt', FILE_SKIP_EMPTY_LINES);
            echo "<b>Working Path:</b> " . $settings[0] . '<br>';
            echo "<b>Working Environment:</b> " . $settings[1] . '<br>';
        ?>

        <center>
        <form action="pinterest.php" method="post" class="pinterestForm">
            <h2 align="left" style="margin-top:1%;margin-left:1%;">Pinterest Single</h2>
            <input class="formTxtbox" type="text" name="singleSearchTerm" placeholder="Enter Search Term (EX: old kl)"><br>
            <input class="formTxtbox" type="text" name="singleFilename" placeholder="Enter Filename (EX: data.csv)"><br>
            <input class="formButton" type="submit" value="Start" name="btnPinSingle">
        </form>

        <form action="#" method="post" class="pinterestForm">
            <h2 align="left" style="margin-top:1%;margin-left:1%;">Pinterest Bulk</h2>
            <input class="formTxtbox" type="text" name="listPath" placeholder="Enter List Path (EX: c:\folder\list.txt)"><br>
            <input class="txtboxSmall" type="text" id="txtScheduleInterval" placeholder="Enter Schedule Time">
            <select id="scheduleOptions">
                <option value="secs">Seconds</option>
                <option value="mins">Minutes</option>
                <option value="hrs">Hours</option>
            </select>
            <br>
            <button type="button" class="formButton" onclick="schedule(); return false;">Schedule</button>
            <input class="formButton" type="submit" value="Start Now" name="btnPinBulk">
        </form>
        </center>

    </div>
</body>
</html>

这是JSFiddle上的托管代码：https://jsfiddle.net/Lnt0crs8/1/

任何帮助将不胜感激。谢谢。

Answer 1

在点击函数调用中获取文本框值，然后尝试

function schedule()
{
    var time = document.getElementById('txtScheduleInterval').value;
    alert(time);
}

Answer 2

加载页面时，变量time现在仅设置一次。

每当按下计划按钮时都应进行设置。

因此，将var time = ...行移至调度功能内的某个位置：

function schedule()
{
    var time = document.getElementById('txtScheduleInterval').value;
    alert(time);
}

Answer 3

只需将以下几行添加到javascript计划功能中

time = document.getElementById('txtScheduleInterval').value;

在加载页面时，将初始化变量time的值。加载页面后，document.getElementById('txtScheduleInterval').value返回的值为undefined，因为输入字段txtScheduleInterval中没有任何值。因此，在调用函数时间表时，必须确保变量时间在txtScheduleInterval中具有当前值。

希望这对您有所帮助。

Answer 4

您将包含dom-operation的javascript放在html之前。

当您的“ var time = document.getElementById（'txtScheduleInterval'）。value;”时跑，它不能得到您的期望。因此，解决方案是将脚本放在正文之后，或者在排定功能中进行dom操作

Answer 5

在调用函数时获取值。应该可以！

var anim = document.getElementById("anim");
anim.addEventListener("animationend", AnimationListener, false);

JavaScript：放心从表单中获取价值

5 个答案: