Uncaught TypeError: Cannot read property 'style' of null when using data-SOMETHING attribute to pass parameter to JavaScript function

Question

我是编码新手，我正在尝试使用 JavaScript 隐藏段落。

这是我的HTML

{% for post in posts %}

    <div class="container p-3 my-3">
        <div class="card">

                    <div class="card-block px-1">

                        <h4 class="card-title">
                            <a href="{% url 'profile' post.user.id %}">{{ post.user }}</a>
                        </h4>

                        <p class="card-text" id="{{ post.id }}">{{ post.content }}</p>

                        <textarea style="display: none;" id="edit-view">{{ post.content }}</textarea>

                        <p class="card-text" id="time">Posted on: {{ post.timestamp }}</p>

                        {% if post.user == request.user %}
                        <button type="button" class="btn btn-primary" id="edit-btn" data-text="{{ post.id }}">Edit</button>
                        {% endif %}

                        <button type="button" class="btn btn-primary" id="save-btn" style="display:none;">Save</button>

                        <p class="card-footer">{{ post.like }} Likes</p>

                    </div>

            
        </div>
    </div>

{% endfor %}

查看源代码，我可以验证 post.id 上下文在数据文本属性和我要隐藏的段落的 ID 中是否正确显示。

这是我的 JavaScript 函数（我在单独的 js 文件中）：

function edit(text) {

    // hide content
    document.querySelector(`#${text}`).style.display = 'none';
}

我在加载 DOM 并将事件侦听器应用于 ID 为 edit-btn 的所有按钮后调用函数：

document.addEventListener('DOMContentLoaded', function() {
        
 // Adding event listener
 document.querySelectorAll('#edit-btn').forEach(function(button) {
   button.onclick = function() {
   console.log('Button clicked!')
   edit();
   }
  });
});

然而我得到了上面的错误，好像参数没有被传递给函数？

非常感谢任何帮助。

P.S。隐藏段落只是编辑功能的第一步。然后我应该用文本区域替换它，填充段落的内容，用户可以在其中编辑然后保存他们 post 的内容。不幸的是，我已经在第一步停留了一段时间了。

Answer 1

您必须将 post.id 传递给 edit() 函数，如下所示：

button.onclick = function(event) {
  const editBtn = event.target;
  const postId = editBtn.getAttribute('data-text');
  edit(postId);
}

Uncaught TypeError: Cannot read property 'style' of null when using data-SOMETHING attribute to pass parameter to JavaScript function

Uncaught TypeError: Cannot read property 'style' of null when using data-SOMETHING attribute to pass parameter to JavaScript function

html

javascript

django

custom-data-attribute