Question

我正在关注this进行chrome扩展的教程。它正在尝试做的是

（1）从Chrome服务器接收值

（2）显示

（3）使用新输入进行更新

（4）下次重新展开扩展时，它会显示更新的值

javascript变量newTotal是要检索和更新的值。然后将其传递到<span>，以便可以显示更新的值。我与视频编写了完全相同的代码，但是没有显示检索到的值也没有更新值，因此我将值传递给<h2>来检查目标值是否已成功检索/存储。然后打印存储的值和更新的值。看起来<span>不会显示该值。

html代码

<h2 id="test">TEST</h2>

<input type="text" id="amount">

<h3>Total Spend : <span id="total">0</span></h3>

JavaScript代码

$(function(){

    $('#spendAmount').click(function(){
        // bring stored data 'total'
        chrome.storage.sync.get('total', function(budget){

            // If there is an existing 'total' save it to newTotal
            var newTotal = 0;
            if(budget.total){
                newTotal += parseInt(budget.total);
            }

            // If input 'amount' exists, add it to newTotal
            var amount = $('#amount').val();
            if(amount){
                newTotal += parseInt(amount);
            }

            // test : check if newTotal is stored - worked
            $(function(){
                $('#test').text(newTotal);
            })

            // save the updated value to chrome
            chrome.storage.sync.set({'total':newTotal});

            // let 'total' show 'newTotal'
            $('total').text(newTotal);

            // empty input box
            $('#amount').val('');
        });
    });
});

我希望它显示储值（大约为1000），然后当我键入10并提交时，它显示1010。我的不显示储值，当我输入10并提交时，在我输入时它仍然为0可以看到该值确实存储在服务器中，因为我可以使用打印它。

Answer 1

选择器错误

更改

$('total').text(newTotal);

到

$('#total').text(newTotal);

var newTotal = 0;
            if(1000){
                newTotal += parseInt(1000);
            }

            // If input 'amount' exists, add it to newTotal
            var amount = 10;
            if(amount){
                newTotal += parseInt(amount);
            }

            // test : check if newTotal is stored - worked
            //$(function(){
                $('#test').text(newTotal);
            //})


            // let 'total' show 'newTotal'
            $('#total').text(newTotal);

            // empty input box

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="test"></span>
<span id="total"></span>

Answer 2

您犯了一个错误：

WebAssembly.instantiateStreaming(fetch('hello.wasm'), importObject)
.then(({instance}) => {
instance.exports.hello();
});

1. You have missed # in the selector :

$('total').text(newTotal);

<span>值未更新

2 个答案: