使用数据集 JavaScript 访问数据属性

问题描述

我在访问数据属性中的值时遇到问题。

• 我目前有一个按钮，它有一组数据属性。
• 我希望通过脚本文件中的数据集访问这些属性中的值。
• 访问后，更改为 json。

我知道它是我遗漏的小东西，但我一直盯着它看太久了，现在我看不到了。我想我在 getDataAttributes 函数中遗漏了一行代码，就在 getElementById 之后，但无法弄清楚它是什么。

提前致谢！

jsfiddle - https://jsfiddle.net/robgit28/4y165bsf/1/

HTML

<button type='button' id="addtowebsite"> 
    <div class="add-btn"
         data-userid="123"
         data-firstname="John"
         data-lastname="Doe">Add button
    </div>
</button>

JAVASCRIPT

document.getElementById('addtowebsite').addEventListener("click",function () {
    getDataAttributes(this);
    });
    
    function getDataAttributes(input) {
        var select = document.getElementById('addtowebsite');
        var jsonData = JSON.stringify({
            userId: parseInt(input.dataset.userid),firstName: input.dataset.firstname,lastName: input.dataset.hostlastname,});
            return jsonData;
                    }

解决方法

    <button type='button' id="addtowebsite"> 
        <div id="d"
             class="add-btn"
             data-userid="123"
             data-firstname="John"
             data-lastname="Doe">Add button
        </div>
    </button>

document.getElementById('addtowebsite').addEventListener("click",function () {
    getDataAttributes(this);
    });
    
    function getDataAttributes(input) {
        var select = document.getElementById("d");
        var jsonData = JSON.stringify({
            userId : parseInt(select.getAttribute("data-userid")),firstName : select.getAttribute("data-firstname"),lastName : select.getAttribute("data-lastName"),});
            return jsonData;
                    }

        <button type='button' id="addtowebsite"> 
            <div id="d"
                 class="add-btn"
                 data-userid="123"
                 data-firstname="John"
                 data-lastname="Doe">Add button
            </div>
        </button>

,

谢谢哈米德！太傻了！我在我的代码中看到了错误，然后回来查看您的答案 - 谢谢！

我只是这样做...

<button type='button' id="addtowebsite"> 
    <div class="add-btn" id="div"
         data-userid="123"
         data-firstname="John"
         data-lastname="Doe">Add button
    </div>
</button>

<script>
var input = document.getElementById('div'); 
    
    function getDataAttributes() {
        var jsonData = JSON.stringify({
            userId: parseInt(input.dataset.userid),firstName: input.dataset.firstname,lastName: input.dataset.hostlastname,});
            console.log(jsonData);
            return jsonData;
                    } 
</script>