Question

我试图在有人通过表单提交其全名和电子邮件地址后发送xAPI声明。除了发送声明之外，我还希望显示一个video.html页面，以便观看视频。我知道在GitHub上有一个这样的例子，但我试图自己做一个更简单的例子。有人可以看看我下面的尝试，并告诉我为什么它不起作用。非常感谢。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
        <script src="js/xapiwrapper.min.js"></script>
        <script type="text/javascript">



                var button = document.getElementById("theButton"),
                fullName =  button.form.fullNameID.value;
                emailAddress =  button.form.emailAddressID.value;

                button.onclick = function() {

                var stmt = new ADL.XAPIStatement(
                new ADL.XAPIStatement.Agent(ADL.XAPIWrapper.hash('mailto:emailAddress'), 'fullName'),
                new ADL.XAPIStatement.Verb('http://adlnet.gov/expapi/verbs/registered', 'registered'),
                new ADL.XAPIStatement.Activity('act:http://ISO9000Video.html', 'Preparing for the ISO 9000 Audit',
                    'Preparation steps for the upcoming ISO 9000 audit.')
            );
            stmt.generateId();
            stmt.addOtherContextActivity( new ADL.XAPIStatement.Activity('compId:internet_proficiency') );
            stmt.generateRegistration();

            ADL.XAPIWrapper.changeConfig({
                'endpoint': 'https://lrs.adlnet.gov/xapi/',
                'user': 'xapi-tools',
                'password': 'xapi-tools',
            });

            ADL.XAPIWrapper.sendStatement(stmt);

            var o = document.getElementById('output');
            o.innerText = JSON.stringify(stmt, null, '    ');
        }

        </script>
    </head>
    <body>


<form id="frm1" action="">
    Full Name: <input type="text" id="fullNameID" name="fullName"><br>
    Email: <input type="text" id="emailAddressID" name="emailAddress"><br><br>
    <input type="button" id="theButton" value="Submit">
</form>

        <p>
        <code><pre id='output'></pre></code>
        </p>
    </body>
    </html>

Answer 1

当页面加载时，页面顶部的脚本正在执行，但带有按钮的表单元素还没有被设置为按钮的属性，因为DOM的那部分没有＆＃39;被解析了。如果您在浏览器中检查控制台，则会发现错误，例如：

未捕获的TypeError：无法读取属性＆＃39;表单＆＃39;为null

将当前位于<script type="text/javascript"> function showMask() { var node = document.getElementById('mask123') node.style.visibility = 'visible'; if node.is(":visible") { node.style.visibility = 'hidden'; } } </script>的{{1}}块移动到<script>的底部，它应该有效。

表单提交然后发送xAPI语句

1 个答案: