django 点击按钮，显示文本，js实现

方法一: 点击显示弹出框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据弹窗</title>
    <script type="text/javascript">
        function showAlert(data) {
            alert(data);  // 弹出数据窗口
        }
    </script>
</head>
<body>
    <button onclick="showAlert('{{ data }}')">显示数据</button>
</body>
</html>

因为我的data数据有很多特殊字符，这里弹出会有问题，放弃

方法二：点击显示文本内容

<button id="showTextBtn">点击显示文本</button>
<div id="textContainer">这里将显示文本内容</div>

document.getElementById('showTextBtn').addEventListener('click', function() {
    document.getElementById('textContainer').textContent = '这是被点击后显示的文本内容。';
});

js中怎么用django的上下文变量呢?

将上下文变量放入HTML标签的属性中，然后通过JavaScript访问它们

{% extends 'base.html' %}

{% block content %}
    <h1>{{ my_variable }}</h1>

    <button id="myButton" data-my-variable="{{ my_variable }}">点击按钮</button>

    <script>
        var button = document.getElementById("myButton");
        var myJSVariable = button.getAttribute("data-my-variable");
        console.log(myJSVariable);  // 输出：Hello, Django!
    </script>
{% endblock %}

参考：https://geek-docs.com/django/django-questions/318_django_how_to_use_the_context_variables_passed_from_django_in_javascript.html

下面这种我测试失败。

# views.py
 
def my_view(request):
    my_var = 'Hello, World!'
    return render(request, 'my_template.html', {'my_var': my_var})

<!-- my_template.html -->
 
<script type="text/javascript">
    var js_var = "{{ my_var|escapejs }}";
    console.log(js_var);  // 输出: Hello, World!
</script>

显示文本内容怎么处理\n

在JavaScript中，你可以使用\n来表示文本中的换行符。如果你想在网页上输出带有换行的文本，你可以使用<pre>标签，这样浏览器会保留文本中的空白符和换行。
<pre id="output"></pre> 创建了一个预格式化的文本输出区域。在JavaScript中，\n 在字符串中创建了换行，当这段文本被设置到<pre>标签中时，浏览器会显示这些换行。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>New Document</title>
</head>
<body>
<pre id="output"></pre>
 
<script>
  function outputTextWithNewLines() {
    var text = "这是第一行\n这是第二行\n这是第三行";
    document.getElementById('output').textContent = text;
  }
  
  outputTextWithNewLines();
</script>
</body>
</html>

归总

<button type="button" id="showTextBtn" data-my-variable="{{ items.error_log }}" class="btn btn-info">Error Log</button>
<pre id="textContainer"></pre>
<script>
    var myJSVariable = "{{ items.error_log|escapejs }}";
    var button = document.getElementById("showTextBtn");
    var myJSVariable = button.getAttribute("data-my-variable");
    document.getElementById('showTextBtn').addEventListener('click', function() {
        document.getElementById('textContainer').textContent = myJSVariable;
    });
</script>