請問Django和javascript的問題

#javascript

alice09just16alex 2023-04-17 16:46:47 ‧ 1078 瀏覽

分享至

我練習時遇到一些問題,問chatGPT也問不出所以然,所以想請教各位大神
因為原本的程式有些長,我PO時有刪掉一些,所以程式碼可能會有點排版或小錯誤,請包涵。
第一個網頁中,判斷要顯示哪個鈕的程式碼有點問題,即使我直接將come_back宣告為'好',按鈕依舊只會顯示"你走開",也試過布林值數字問chatGPT,但都沒有解決,所以這部份也希望得到幫助 > <

第一個網站:

<!DOCTYPE html>
<html>
<head>
    {% load static %}
    <title>登入</title>
    <script>
        let come_back = false
        let count = 0;
        let movecount = 0;
        if (document.cookie.indexOf('count=') != -1) {
            let cookie = document.cookie.split(';');
            for (let i = 0; i < cookie.length; i++) {
                let [key, value] = cookie[i].trim().split('=');
                if (key === 'count') {
                    count = parseInt(value);
                }
            }
            come_back = true
        };
    </script>
</head>
<body>
    <div style="text-align: center;margin-top: 150px;">
        <h2>登入系統{{count}}</h2>
    </div>
    <div style='display:none;'><audio id='ahh' src='{% static "ahh.mp3" %}'></audio></div>
    <div style='position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);'>
        <form method="post" style="text-align: center;" >
            {% csrf_token %}
            <p style='text-align:left;margin-bottom:0;'>帳號:</p><input type="text" name="username"><br/>
            <p style='text-align:left;margin-bottom:0;'>密碼:</p><input type="password" name="password"><br/>
            <a href='/signup/'>註冊帳戶</a>
              
            <a href='/forget/'>忘記密碼</a><br/>
            <a style='color:red'>{{error}}</a><br/>
            <input type="submit" name="login" value="登入">
        </form>
    </div>
    <div style='position: absolute; bottom: 0; right: 0'>
        {%if come_back == true %}
            <button id='dont' onclick="handlebuttonclick()">你走開</button>
        {%elif come_back == false%}
            <button id='dont' onclick="handlebuttonclick()">我不喜歡你看我的視線</button>
        {%endif%}
    </div>


    <script>
        function handlebuttonclick(){
            count++;
            if (count < 4) {
                let message = ["別碰我", "看不懂人話膩", '再碰我就要叫了'];
                document.getElementById('dont').textContent = message[count-1];
            }
            else if (count == 4) {
                document.cookie = `count=${count}; path=/`;
                window.location.href = '/404';
            }
        }
            else if (count < 8) {
            document.getElementById('dont').textContent = '我放棄...'
            }
    </script>
</html>

第二個網站:

<!DOCTYPE html>
<html>
    <head>
        <title>404 Not Found</title>
        <style>
            body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            }
            h1 {
            font-size: 48px;
            color: #444;
            text-align: center;
            margin-top: 100px;
            }
            p {
            font-size: 24px;
            color: #777;
            text-align: center;
            margin-top: 30px;
            }
            
        </style>
    </head>
    <body>
        <h1>404</h1>
        <p>Oops! The page you requested could not be found.</p>
        <div style='position: absolute; bottom: 0; right: 0'>
            <button id='dont' onclick="handlebuttonclick()">我已經警告過你了</button>
        </div>
        <script>
            let cookie = document.cookie.split(';');
            let count = 0;
            for (let i = 0; i < cookie.length; i++) {
                let[key,value] = cookie[i].trim().split('=');
                if (key === 'count') {
                    count = parseInt(value);
                }
            }
            function handlebuttonclick(){
                count++;
                if (count < 6) {
                    document.getElementById('dont').textContent = '你把這個網頁弄壞了';
                }
                else if (count == 6) {
                    document.getElementById('dont').style.display = 'none';
                    document.cookie = `count=${count}; path=/`;
                }
            }
        </script>
    </body>
</html>

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

froce

iT邦大師 1 級 ‧ 2023-04-18 09:20:16

最佳解答

你前後端觀念沒搞懂。

Django template的變量，取決在你在views.py裡面吐出來的，而且只會生效一次，跟javascript完全沒關係。

views.py(我隨便寫的)

def root(request):
    return render(request, "root.html", {"counter": 1})

root.html

<!DOCTYPE html>
<html>
<head>
    <title>登入</title>
</head>
<body>
    <span id="counter">{{counter}}</span>
    <button id="btn">click me</button>
</body>
<script>
    let counter = 2    //這邊跟上面的counter沒有任何關聯
</script>

實際上你在瀏覽頁面的時候，當瀏覽器送出request，伺服器接收到request，就會根據對應網址views.py的裡面的對應view的內容，送出純文字檔。
從上面的例子，伺服器送出的原始碼會是:

<!DOCTYPE html>
<html>
<head>
    <title>登入</title>
</head>
<body>
    <span id="counter">1</span>
    <button id="btn">click me</button>
</body>
<script>
    let counter = 2    //這邊跟上面的counter沒有任何關聯
</script>

伺服器會做的只有根據你寫的對應view去把變數填進去，後面送到瀏覽器之後就跟伺服器沒關係了，直到你再送出request為止。

所以要變更頁面，你只能有兩種方式:

再度送出request，重新輸出整個頁面。
透過js操作DOM。

1顯然不符合現代的操作需求，也不符合你的code，所以我就弄個2的範例。
root.html

<!DOCTYPE html>
<html>
<head>
    <title>登入</title>
</head>
<body>
    <span id="counter">{{counter}}</span>
    <button id="btn">click me</button>
</body>
<script>
    let counter = 2    //這邊跟上面的counter沒有任何關聯
    const btnElm = document.getElementById("btn")    //取得要操作的節點
    const counterElm = document.getElementById("counter")
    btnElm.addEventListener("click", ()=>{
        counterElm.innerText = counter
    })    //對節點的click綁定動作
</script>