元素值比较的结果不正确

Incorrect result from element value comparison

本文关键字：结果 不正确 比较 元素      更新时间：2023-09-26

我正在制作一个html纸牌游戏，它有一个带有大于或等于比较运算符的if语句。但当钱低于价格时，它仍然像你有所需的钱一样运行。

HTML

    <article id="moneysys">
        <p id="ptdabtd" >Click 'Set Cash' To Enter A Starting Ammount. (Button Will Be Deleted Once Finished)</p>
        <button id="scda" onclick="setcash();">Set Cash.</button>
        <br />
        <div class="cash">Cash: <span id="cash">0</span></div>
        <div>Pack Price: <span id="packprice">50</span></div>
    </article>
    <main>
        <center>
            <button class="open" onclick="opencards()">Open Cards.</button>
            <br />
            <img class="card" src="images/blank.png" id="canvas" />
            <img class="card" src="images/blank.png" id="canvas1" />
            <img class="card" src="images/blank.png" id="canvas2" />
            <img class="card" src="images/blank.png" id="canvas3" />
            <img class="card" src="images/blank.png" id="canvas4" />
        </center>
    </main>

JAVASCRIPT

function setcash(){
    var wcash =  prompt("Please Enter How Much Cash You Want To Start With", "Cash Wanted");
    document.getElementById("cash").innerHTML = wcash;
    document.getElementById("scda").remove();
    document.getElementById("ptdabtd").remove();
}
var cards = new Array("images/1.png", "images/2.png", "images/3.png", "images/4.png", "images/5.png","images/6.png", "images/7.png", "images/8.png", "images/9.png");
var pack = document.getElementById("packprice");
var ccash = document.getElementById("cash");
var pc = Number(pack);
var cash = Number(ccash);
function opencards(){
    if (cash >= pc){
        var randomNum = Math.floor(Math.random() * cards.length);
        document.getElementById("canvas").src = cards[randomNum];
        document.getElementById("canvas1").src = cards[randomNum];
        document.getElementById("canvas2").src = cards[randomNum];
        document.getElementById("canvas3").src = cards[randomNum];
        document.getElementById("canvas4").src = cards[randomNum];
        cash = cash - pc;
    } else{
        alert("not")
    }
};

您只得到元素本身，而没有得到这些元素的实际值。然后，您正试图从元素中获取一个数字。由于实际元素不会改变（无论innerhtml设置为什么），因此每次比较都会得到相同的结果。

var pack = document.getElementById("packprice"); //this gets you the element
var ccash = document.getElementById("cash"); //this gets you the element

尝试：

var pack = document.getElementById("packprice").innerHTML;
var ccash = document.getElementById("cash").innerHTML;

你也可以省略

var pc = Number(pack);
var cash = Number(ccash);

您没有得到pack或ccash变量的值。因为您没有使用innerHTML。

innerHTML属性设置或返回元素的HTML内容（内部HTML）。

var pack = document.getElementById("packprice");
var ccash = document.getElementById("cash");

用这个替换你的代码

var pack = document.getElementById("packprice").innerHTML;
var ccash = document.getElementById("cash").innerHTML;

折射率

你能做一些类似的事情吗：

console.log('typeOf Cash : ' + typeof cash + ', cash value : ' + cash);
console.log('typeOf pc : ' + typeof pc + ', pc value : ' + pc);

请在if语句之前。

相关文章：