javascript - JS函数再次调用时不会创建另一个二维码对象

Question

我正在使用名为 qrcode.js ( https://github.com/davidshimjs/qrcodejs ) 的 JavaScript 文件。

我想要做的是从用户那里获取输入，然后从我的 C# 代码后面调用 JavaScript 函数 (createQRCode) 以创建多个 QR 码。

protected void SubmitButton_Click(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(Page, this.GetType(), "CallMyFunction", "createQRCode('tr1c1', 'www.google.com')", true);
    tr1c1Label.Text = "www.google.com";
    ScriptManager.RegisterStartupScript(Page, this.GetType(), "CallMyFunction", "createQRCode('tr1c2', 'www.reddit.com')", true);
    tr1c2Label.Text = "www.reddit.com";
    ScriptManager.RegisterStartupScript(Page, this.GetType(), "CallMyFunction", "createQRCode('tr1c3', 'www.stackoverflow.com')", true);
    tr1c3Label.Text = "www.stackoverflow.com";
    ScriptManager.RegisterStartupScript(Page, this.GetType(), "CallMyFunction", "createQRCode('tr2c1', 'www.twitter.com')", true);
    tr2c1Label.Text = "www.twitter.com";
    ScriptManager.RegisterStartupScript(Page, this.GetType(), "CallMyFunction", "createQRCode('tr2c2', 'www.facebook.com')", true);
    tr2c2Label.Text = "www.facebook.com";
    ScriptManager.RegisterStartupScript(Page, this.GetType(), "CallMyFunction", "createQRCode('tr3c1', 'www.myspace.com')", true);
    tr3c1Label.Text = "www.myspace.com";
}

单击提交按钮后，它会多次调用此 JavaScript 函数:

function createQRCode(div, url) {
        var qrcode = new QRCode(document.getElementById(div), {
            text: url,
            width: 128,
            height: 128,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
        });
    };

后面的代码传递一个用于创建二维码的 div 和一个用于放入二维码的 url。这有效但只能一次。它每次都会调用javascript函数，但不会生成新的二维码。它只创建第一个并且它是正确的。这是我的意思的屏幕截图: QR Code Creation

我的问题是如何让javascript在每次调用该函数时创建一个新的二维码？

Answer 1

我不懂 C#，但我认为错误在

ScriptManager.RegisterStartupScript(Page, this.GetType(), "CallMyFunction", "createQRCode('tr1c2', 'www.reddit.com')", true);

每个脚本的标识符(第三个参数)必须是唯一的!试试这个:

protected void SubmitButton_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(Page, this.GetType(), "CallMyFunction1", "createQRCode('tr1c1', 'www.google.com')", true);
tr1c1Label.Text = "www.google.com";
ScriptManager.RegisterStartupScript(Page, this.GetType(), "CallMyFunction2", "createQRCode('tr1c2', 'www.reddit.com')", true);
tr1c2Label.Text = "www.reddit.com";
ScriptManager.RegisterStartupScript(Page, this.GetType(), "CallMyFunction3", "createQRCode('tr1c3', 'www.stackoverflow.com')", true);
tr1c3Label.Text = "www.stackoverflow.com";
ScriptManager.RegisterStartupScript(Page, this.GetType(), "CallMyFunction4", "createQRCode('tr2c1', 'www.twitter.com')", true);
tr2c1Label.Text = "www.twitter.com";
ScriptManager.RegisterStartupScript(Page, this.GetType(), "CallMyFunction5", "createQRCode('tr2c2', 'www.facebook.com')", true);
tr2c2Label.Text = "www.facebook.com";
ScriptManager.RegisterStartupScript(Page, this.GetType(), "CallMyFunction6", "createQRCode('tr3c1', 'www.myspace.com')", true);
tr3c1Label.Text = "www.myspace.com";

}