js alert沒有反應

js #javascript alert

cell_ET_master 2022-11-28 19:42:01 ‧ 1974 瀏覽

分享至

我用online的可以，但是開自己的html的時候沒有alert?請問是為什麼?

登入發表討論

直播研討會

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

直播中

1 個回答

淺水員

iT邦大師 6 級 ‧ 2022-11-28 20:34:26

最佳解答

程式碼盡量少用截圖，通常看到截圖願意回應的會比較少。
可以用 it 邦幫忙內建貼程式碼的方式，如圖貼程式碼方法
或是把你 codepen 的網址直接貼出來

上一篇有人留言過「改用相對路徑試試看」，我也猜是這個問題
可以按 F12 開啟開發工具，看看你的 js 跟 css 有沒有讀取到

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

淺水員 iT邦大師 6 級 ‧ 2022-11-28 20:46:53 檢舉

幫你改好

index.html

<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <meta charset="UTF-8">
    <title>首頁</title>
    <link rel="stylesheet" href="nav.css">
</head>
<body>
    <nav>
        <ul>
            <li class="btn" id="home"><a>Home</a></li>
            <li class="btn" id="2"><a>Page 1</a></li>
            <li class="btn" id="3"><a>Page 2</a></li>
        </ul>
    </nav>
    <!-- script 如果不是利用監聽事件，等全部載入再執行的話
        要放在「用到的頁面元素」的後面 -->
    <script src="nav.js"></script>
</body>
</html>

nav.css

.btn{
    background-color : rgb(27, 27, 27);
    width:90px;
    height: 35px;

    color:rgb(255, 255, 255);
    line-height: 200%;
    text-align:center;
    display:inline;
    float:left;
    list-style-type: none;
}
.btn:hover{
    background-color : rgb(71, 71, 71);
}

nav.js

var home = document.getElementsByClassName('btn')[0];
home.setAttribute("onclick","test()");
function test(){
    window.alert('hello');
};

淺水員 iT邦大師 6 級 ‧ 2022-11-28 21:02:46 檢舉

如果 nav.js 改成這種寫法
<script src="nav.js"></script> 就可以放在 head 區塊

function test() {
    window.alert('hello');
};

//監聽 DOMContentLoaded 事件，當 DOM 內容讀取完畢才執行
document.addEventListener('DOMContentLoaded', function () {
    var home = document.getElementsByClassName('btn')[0];
    
    //下面這行跟 home.setAttribute("onclick", "test()"); 會得到相同結果
    home.addEventListener('click', test);
});

淺水員 iT邦大師 6 級 ‧ 2022-11-28 21:08:25 檢舉

jquery 版本
<script src="nav.js"></script> 也可以放在 head 區塊

function test() {
    window.alert('hello');
};

$(function() {
    $('.btn').first().on('click', test);
});

cell_ET_master iT邦新手 5 級 ‧ 2022-11-28 21:35:17 檢舉

可以了，謝謝你，我以後會注意的!

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js

IT邦幫忙