可以't让JQuery附加一些html和一个值

Can't get JQuery to append some html and a value

本文关键字：html 一个 JQuery 可以      更新时间：2023-09-26

我正在尝试创建一个脚本，为随机数生成器保留3的历史记录。（这都是为了练习，以采取更先进的方法）但由于某种原因，我无法在代码从不同的JS文件开始执行后让jQuery附加一个新的html表/行。然而，当我试图将行添加到表中时，除了部分之外，一切似乎都按计划进行。我这里有一把小提琴：http://jsfiddle.net/e3ey2a3s/2/

然而，这是我的代码：

convert.js (the generator)
 var min, max, setDol = false,
   pArry = [];
function chooseRandom() {
    min = prompt('whats the max value?', 'max');
    max = prompt('whats the min value?', 'min');
    return convertType(min, max);
}
function convertType(min, max) {
    if (typeof min === 'string' || typeof max === 'string') {
        document.getElementById('convert').innerHTML = "converting strings to numbers..."
        parseInt(min);
        parseInt(max);
    }
    return getRandom(min, max);
}
function getRandom(min, max) {
    if (isNaN(min) || isNaN(max)) {
        borked();
    } else {
        return amtFixed(Math.random() * (max - min) + min);
    }
}
function amtFixed(amt) {
    if (amt >= 0 && amt <= 10) {
        document.getElementById('text').innerHTML = "Our number is " + amt + " which is between 0 and 10";
    } else if (amt >= 11 && amt <= 20) {
        document.getElementById("text").innerHTML = "Our number is " + amt + " which is between 11 and 20";
    } else {
        document.getElementById("text").innerHTML = "Our number is " + amt + " which is greater than 20. huh.";
    }
    var fixed = Number(amt).toFixed(2);
    return convertFix(fixed);
};
function convertFix(fixed) {
    if (typeof fixed === 'string') {
        fixed = (fixed / 1);
        document.getElementById("fixed").innerHTML = typeof fixed + " " + fixed + " converted down to two decimals.";
        setDol = confirm("Convert our amount to a dollar amount?");
    } else {
        console.log('Failed to convert...');
    }
    return success(fixed);
};
function borked() {
    var broke = false;
    alert("You must not of entered a proper number... That sucks :/");
    var broke = confirm("Do you want to retry?");
    if (broke) {
        return chooseRandom();
    } else {
        return document.getElementById("text").innerHTML = "I r broked :(";
    }
}
function success(num) {
    var amtHist = [];
    if (setDol) {
        $("#price").append('$' + num + ' Set fixed to a dollar amount!');
        pArry.push(num);
        return buildHistory(pArry);
    } else {
        $("#price").empty().append("Our fixed value is: " + num);
        pArry.push(num);
        return buildHistory(pArry);
    }
}

在这个脚本完成success()之后，将完成的数组发送到我的data.js函数buildHistory()，它看起来像这样：

 buildHistory = function(arr) {
    var t, i, _this = this,
        numEls = 0,
        a = arr;
    var objLen = holdObj.History.length;
    table = $('table.history');
    //Let's do our loops to check and set history data
    //We need to get our history data so we can make sure not to re print old data.
    for (t = 0; t <= objLen; t++) {
        for (i = 0; i < a.length; i++) {
            x = objLen[t];
            if ($.inArray(x, a) === -1) {
                    //Alright now we build onto the history table
                $('table.history').append('<tr><td>' + a[i] + '</td></tr>');
                var cell = table.find('td');
                cell.addClass('hist' + numEls);
                numEls++;
                holdObj.History.push(a[i]);
            } else {
                break;
            }
        }
    }
    // Let's remove the oldest value once the table exceeds 3 or 4.
        if (objLen > 3 && numEls > 3) {
            var tmp = table.find('hist_3');
            table.remove(tmp);
            holdObj.History.pop();
        }
}

这一切都还在酝酿中，所以这里没有什么真正的最终确定，我可能只是忽略了一个简单的解决方案。

这是我的HTML:

<html>
    <head>
    <script type="text/javascript" src="../source/libs/jQuery-1.8.3.min.js"></script>
        <title>Index</title>
    </head>
    <body>
        <p>This is just some filler content lol.</p>
        <p>Let's run some scripts! Click the buttons!</p>
        <div class="math">
            <p id="convert"></p>
            <p id="text"></p>
            <p id="fixed"></p>
            <p id="price"></p>
            <table id="history">
            <tr>
                <th>History</th>
            </tr>
            <tr>
                <td id="hist"> Value #1</td>
            </tr>
            </table>
        </div>
        <button class="scrBtn">Click to start Script</button>
        <div id="date"></div>
        <button class="dateBtn">Get Date</button>
        <div class="person">
            <div class="pTitle">
                <div class="pBody">
                    <div class="fName">Name: </div>
                    <div class="age">Age: </div>
                    <div class="height">Height: </div>
                    <div class="eyecolor">Eye Color: </div>
                    <div class="sex">Sex: </div>
                    This is where our person should go.
                </div>
            </div>
        </div>
        <a href="view/Form/personForm.html">
            <button class="pBtn">Get Info</button>
        </a>
    <div class="bRowLeft">test
    </div>
    <div class="tRowLeft">test
    </div>
</body>
<script type="text/javascript" src="../source/model/data.js"></script>
<script type="text/javascript" src="../source/model/convert.js"></script>
<script type="text/javascript" src="../source/model/button.js"></script>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</html>

很抱歉发了这么长的帖子，但我正在尽可能多地探索。

（该代码通过jQuery和按钮.js激活）

$(document).ready(function() {
    $('.scrBtn').click(function() {
        chooseRandom();
    });
});

再次感谢，如果需要更多信息，请告诉我。

$('table.history')-您没有<table class="history">元素。

试试这个：

table = $("#history");

在附加的地方也是一样。

相关文章：