Question

首先，请注意，虽然我的JavaScript很长，但我相信修复我的代码所需的所有修改都可能在（document）.ready函数中。我遇到的问题是，当我通过切换菜单2上的项目并输入一个值来生成JavaScript中的文本框（.wy）时，单击计算按钮时它将返回undefined。但是，我能够毫无问题地获取HTML生成的文本框（.amount）值。我该如何解决这个问题？

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="salaryconverter2.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="salaryconverter2.js"></script>
    <title>Salary Converter 2</title>
</head>
<body>
    <h1>Salary Converter</h1>
    <div class="1"></div>
    <div class="2"></div>
    <select id="menu1" onchange="switch1()">
        <option class='men1'>hourly wage</option>
        <option class='men1'>weekly earnings</option>
        <option class='men1'>monthly salary</option>
        <option class='men1'>annual salary</option>
    </select>
    <div>to</div>
    <select id="menu2" onchange="switch2()">
        <option>hourly wage</option>
        <option>weekly earnings</option>
        <option>monthly salary</option>
        <option>annual salary</option>
    </select>
    <br>
    $<textarea class="amount" placeholder="Enter amount"></textarea>per
    <div class="per1">hour</div>
    <div class="anchor1">y</div>
    <div class="anchor2">z</div>
    <button id="button">Calculate</button>
    <div class="result">x</div>
</body>
</html>

and Javascript:

$(document).ready(function(){
    $('#menu1').on("menuselect", function (event, ui) {
        var value1 = $("#menu1 option:selected").text();
        var value2 = $("#menu2 option:selected").text();
    });
    value1 = "hourly wage";
    value2 = "hourly wage";

    $("#menu1").change(function() {
        //ifStatement;
    });
    $("#menu2").change(function() {
        //ifStatement;
        $(".anchor1").html("<textarea id='w/y' placeholder='(52) weeks per year'></textarea>");
    });
    $("#button").click(function() {
        console.log($(".wy").val());
        console.log($(".amount").val());
        //conversion();
    });
});



function ifStatements() {
    console.log("D");
    switch1();
    switch2();
    if (value1 == "hourly wage") {
        $(".per1").html("hour");
    }
    if (value1 == "weekly earnings") {
        $(".per1").html("week");
    }
    if (value1 == "monthly salary") {
        $(".per1").html("month");
    }
    if (value1 == "annual salary") {
        $(".per1").html("year");
    }

    if (((value1 == "weekly earnings") && (value2 == "annual salary")) || ((value2 == "weekly earnings") && (value1 == "annual salary"))) {
        console.log("x");
        $(".anchor1").html("<textarea id='wy' placeholder='(52) weeks per year'></textarea>");
        $(".anchor2").html("");
    }
    else if (((value1 == "weekly earnings") && (value2 == "monthly salary")) || ((value2 == "weekly earnings") && (value1 == "monthly salary"))) {
        $(".anchor1").html("<textarea placeholder='(4) weeks per month'></textarea>");
        $(".anchor2").html("");
    }
    else if (((value1 == "hourly wage") && (value2 == "annual salary")) || ((value2 == "hourly wage") && (value1 == "annual salary"))) {
        $(".anchor1").html("<textarea placeholder='(40) hours per week'></textarea>");
        $(".anchor2").html("<textarea placeholder='(52) weeks per year'></textarea>");
    }
    else if (((value1 == "hourly wage") && (value2 == "monthly salary")) || ((value2 == "hourly wage") && (value1 == "monthly salary"))) {
        $(".anchor1").html("<textarea placeholder='(40) hours per week'></textarea>");
        $(".anchor2").html("<textarea placeholder='(4) weeks per month'></textarea>");
    }
    else if (((value1 == "hourly wage") && (value2 == "weekly earnings")) || ((value2 == "hourly wage") && (value1 == "weekly earnings"))) {
        $(".anchor1").html("<textarea placeholder='(40) hours per week'></textarea>");
        $(".anchor2").html("");
    }
    else if (((value1 == "annual salary") && (value2 == "monthly salary")) || ((value2 == "annual salary") && (value1 == "monthly salary"))) {
        $(".anchor1").html("<textarea placeholder='(12) months per year'></textarea>");
        $(".anchor2").html("");
    }
    else {
        $(".anchor1").html("");
        $(".anchor2").html("");
    }
}
function conversion() {
    console.log($("input#w/y").val());
}

function switch1() {
        value1 = $("#menu1 option:selected").text();;
    }
function switch2() {
        value2 = $("#menu2 option:selected").text();
    }

Answer 1

在下面的一行中，您要创建一个ID为wy的

$(".anchor1").html("<textarea id='wy' ............

然而，您尝试使用类选择器.wy来访问它。更改为ID选择器#wy：

console.log($("#wy").val());

Answer 2

更改

$(".wy").val()

要

$("#wy").val()

您已将textarea的ID而不是其类设置为＆＃34; wy＆＃34;。

Javascript生成的文本框值=未定义

2 个答案: