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 %}
下面这种我测试失败。
# 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>
