JS Function 再次调用时不会创建另一个二维码对象

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.whosebug.com')", true);
    tr1c3Label.Text = "www.whosebug.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.whosebug.com')", true);
tr1c3Label.Text = "www.whosebug.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";

}

JS Function 再次调用时不会创建另一个二维码对象

JS Function won't create another qr code object when called again

javascript

c#

jquery

qr-code