Question

尝试使用document.getElementById捕获显示在网页上的信息“年龄”，并将其作为“ userName”传递给浏览器API函数setCustomAttribute。这是为了将自定义数据从网站捕获到Newrelic Browser的PageView / PageAction事件。下面是代码。

<a href="/demo" id="try-me">Try Me!</a>

<form action="/signup" id="myform">
   <input id="email" name="email">
   <input type="submit" value="Signup">
</form>

<script type="text/javascript">

document.getElementById('try-me').addEventListener('click',function (e) {
        newrelic.addPageAction('clickedTryMe');
    })
    document.getElementById('myform').addEventListener('submit', function (e) {
        var email = e.target.elements['email'].value;
        newrelic.addPageAction('userSignup', {email: email});

    })
</script>
</br>
</br>
<script type="text/javascript">
    var age=document.getElementById("age");
    newrelic.setCustomAttribute('userName', age );
</script>

</head>
<body> 

</br>
</br>
<div id="age">20</div>

Answer 1

现在，document.getElementById("age")是null，因为脚本是在渲染<div id="age></div>之前执行的。您需要将脚本移动到页面底部。

此外，age作为DOM元素返回。您可能想要它的值（age.innerHTML）？

Answer 2

相同代码并符合HTML标准

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>a title...</title>
</head>
<body>
  <a href="/demo" id="try-me">Try Me!</a>

  <form action="/signup" id="myform">
    <input  name="email" placeholder="e-mail" value="" >
    <button type="submit">Signup</button>
  </form>
  </br>
  </br>
  </br>
  </br>
  <div id="age">20</div>

<!-- end of BODY content , begining of Javascript commands -->
<script>
  const tryMe  = document.getElementById('try-me')
    ,   myForm = document.getElementById('myform')
    ,   E_age  = document.getElementById('age')
    ;
  tryMe.onclick=e=>
    {
    newrelic.addPageAction('clickedTryMe');
    }
  myForm.onsubmit=e=>
    {
    newrelic.addPageAction('userSignup', { email: myForm.email.value });
    }
  // 
  newrelic.setCustomAttribute('userName', E_age.textContent );
</script>
</body>
</html>

无法使用document.getElementById捕获div的值

2 个答案: