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

Question

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

我目前有一个按钮，它有一组数据属性。
我希望通过脚本文件中的数据集访问这些属性中的值。
访问后，更改为 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;
                    }

Answer 1

    <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>

Answer 2

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

我只是这样做了...

<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>

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

Accessing data attributes with dataset JavaScript

html

javascript

dataset

custom-data-attribute