一旦 JavaScript 中任何 HTML 元素的值发生变化，就会更新画布

Updating canvas as soon as value of any HTML element changes in Javascript

本文关键字：变化 更新 任何 JavaScript HTML 元素 一旦      更新时间：2023-09-26

这是相关的javascript代码

<script>
    $.fn.ready(function() {
        var src = $('#src').val();
        Meme('url1', 'canvas','','');
        $('#top-line, #bottom-line').keyup(function() {
            Meme(src, 'canvas', $('#top-line').val(), $('#bottom-line').val());
            if(document.getElementById('stanley').checked) {
                src = 'url2';
                Meme(src, 'canvas', $('#top-line').val(), $('#bottom-line').val());
            } else if(document.getElementById('futurama').checked) {
                src = 'url3';
                Meme(src, 'canvas', $('#top-line').val(), $('#bottom-line').val());
            }
        });
    });
</script>

这是 HTML 代码

<div class="col-lg-12 col-md-12 col-sm-12">
    <input type="radio" name="meme" id="stanley" class="input-hidden" />
    <label for="stanley"><img src="url3" alt="" width="80px;" height="80px;"/></label>
    <input type="radio" name="meme" id="futurama" class="input-hidden" />
    <label for="futurama"><img src="url4" alt="" width="80px;" height="80px;" /></label>
</div>
<div class="col-lg-6 col-md-6 col-sm-12" id="containcanvas" style="margin-top:10px;">
    <canvas id="canvas"></canvas>
</div>
<div class="col-lg-6 col-md-6 col-sm-12" style="margin-top:10px;">
    <form>
        <input class="form-control" id="src" placeholder="Image URL">
        <input class="form-control" id="top-line" placeholder="top line">
        <input class="form-control" id="bottom-line" placeholder="bottom line">
    </form>

现在，如果顶行和底行中的文本发生变化，画布会更新。为了在选中单选按钮后更新画布，我已将其放入代码中，其中顶行和底行值的更改会更新画布。问题是这种方法很糟糕。另一个问题是，在我只是在 src 中输入图像 url 后，画布不会更新。我应该如何修改此代码，以便在选中任何单选按钮或输入中的任何文本值更改后立即更新所有画布？

回调代码没什么神奇的。它只是一个Javascript函数，你把它作为一个参数传递给另一个函数。因此，您可以让一个变量指向回调函数，并在其他事件上调用它。

<script>
    $.fn.ready(function() {
        var src = $('#src').val();
        Meme('url1', 'canvas','','');
        var callbackFn = function() {
            Meme(src, 'canvas', $('#top-line').val(), $('#bottom-line').val());
            if(document.getElementById('stanley').checked) {
                src = 'url2';
                Meme(src, 'canvas', $('#top-line').val(), $('#bottom-line').val());
            } else if(document.getElementById('futurama').checked) {
                src = 'url3';
                Meme(src, 'canvas', $('#top-line').val(), $('#bottom-line').val());
            }
        });
        $('#top-line, #bottom-line').keyup(callbackFn);
        $('input[name="meme"]').change(callbackFn);
        $('#src').change(callbackFn);
    });
</script>

我不确定$('#src').change事件是否正确：您可能想要keyup，但意图应该明确。

相关文章：