Umpan klik pendengar Javascript-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

Umpan klik pendengar Javascript

Susan Sarandon

Nov 23, 2024 am 09:16 AM

Memiliki kod bertulis dalam fail ujian yang berfungsi dengan baik, saya terpaksa memasukkannya ke dalam kod utama & ia tidak berfungsi dengan baik.

Kod asas terdiri daripada fail html ringkas dengan satu butang yang dipanggil "ingat ini."

Javascript listeners click bait

Itu mempunyai onclick pada fungsi yang dipanggil showRememberMenu(). Fungsi itu mencipta menu yang dipaparkan di bawah butang.

Javascript listeners click bait

Menu lungsur turun mempunyai beberapa teg untuk ditambahkan pada data sebagai peringatan tentang sebab pengguna cuba mengingatinya. (Saya sudah tua, saya perlukan semua bantuan yang saya boleh dapatkan untuk mengingati sesuatu.)

Klik butang, lihat menu lungsur turun, klik teg yang anda mahu & data yang anda lihat disimpan dalam tatasusunan dengan teg itu. Setelah mengklik menu ia hilang.

Tugas saya kemudiannya untuk menggugurkannya ke dalam skrip yang lebih besar & melihatnya berfungsi sama... oh, mungkin tidak. Klik menu, simpan data dengan tag dan... apa? kenapa menu masih ada? Ia telah dipadamkan dalam bentuk asal sebaik sahaja ia diklik. Mengapa ia tidak hilang?

Dan jika saya mengklik teg yang menyatakan 'Keluar jangan simpan' ia masih memaparkan menu.

Sebagai pengguna, saya sedang melihat kad yang mempunyai data daripada pangkalan data. Mengklik butang ini ialah cara untuk menyimpan data tersebut untuk kegunaan kemudian. Di sini anda boleh melihat kad dengan butang baharunya.

Javascript listeners click bait

Klik butang itu untuk melihat lungsur turun dan pilih teg yang berkaitan untuk mengingati data ini...

Javascript listeners click bait

Sekarang lakukan perkara yang sama dengan kad lain dan anda mempunyai semua data yang diperlukan untuk menyelesaikan beberapa tugasan, tetapi mengapakah "&%!!! menu itu tidak akan hilang?

Selepas saya kehabisan idea, saya menghubungi rakan sekerja saya Gemini the AI. Ia memberi saya penyelesaian pertama yang betul-betul kod yang saya sudah ada. Ia mencadangkan banyak perkara, tiada satu pun yang berkesan.

Adalah yakin bahawa menyemak kewujudan nod & elemen akan menjadikan semuanya baik, tetapi tidak.

Ia mengambil masa kira-kira sejam untuk diberitahu perkara yang tidak berkesan dan diberi syarahan tentang isu masa, mungkin memerlukan penangguhan, yang sememangnya tidak berkaitan, tetapi secara perlahan-lahan kami menyelesaikan masalah itu sebagai satu pasukan.

Jika anda ingin mencuba menyelesaikan ini, saya yakin anda boleh melakukannya dalam masa yang lebih singkat.

Berikut ialah kod draf asal yang berfungsi...

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Some Javascript</title>
  <link rel="stylesheet" href="./someJavascript.css">
  <link rel="icon" href="favicons/favicon.ico" type="image/icon type">
</head>
<body>
  <div>



<p>and the javascript<br>
</p>

<pre class="brush:php;toolbar:false">let logToConsole=true;
var rowData={THId:'2', TaskName:'To climb a tree', TaskDesc:'Try using hands & feet'};
var remember=[];

function rememberProcess(remember){
    if(logToConsole) console.log('RememberProcess()');
for(i=0;i<remember.length;i+=2){
    console.log('Item ',i/2+1,' of ', remember.length/2,' items', 'Remember as ',remember[i], remember[i+1]);}        
}

function putDataIntoRemember(menuHeader,rowData){
    if(logToConsole) console.log('putDataIntoRemember()');
    remember.push(menuHeader);
    remember.push(rowData);
}

function deleteMenu(menuLu){
    if(logToConsole) console.log('deleteMenu()');
    menuLu.parentNode.removeChild(menuLu);
}

function showRememberMenu(){
    if(logToConsole) console.log('showRememberMenu()');

 if(document.querySelector('#rememberMenu') ) return; //menu already exists

    const remember_button = document.querySelector('#remember');
    const menuHeaders=['EXIT no save', 'as Student', 'as Manager', 'as Author', 'as Task' , 'as Note'];
    menuLu=document.createElement('lu');
    menuLu.id='rememberMenu';

for(let i=0;i<menuHeaders.length;i++){
    li=document.createElement('li');         
    li.innerText=menuHeaders[i]; 
    li.id=menuHeaders[i];
    li.classList.add('rememberLi');

    li.addEventListener('click', () => { //console.log('li button clicked', menuHeaders[i], rowData)
        if(menuHeaders[i]=='EXIT no save') {deleteMenu(menuLu);return};
    putDataIntoRemember(menuHeaders[i], rowData);//[header][rowData]       
    rememberProcess(remember);//do something with the stored data structure
    deleteMenu(menuLu);
      })

    menuLu.appendChild(li);
    }

remember_button.appendChild(menuLu);      
}

Salin selepas log masuk

Terdapat beberapa css, tetapi ia tidak berkaitan dengan masalah

.remember_button {

        background-color: #5A5050;
        border: 0;
        border-radius: 5px;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
        color: #fff;
        font-size: 12px;
        padding: 3px 4px;
        position: relative;        
        letter-spacing: 1px;
        width: 100px;

}

    /*Button goes white on hover*/
.remember_button:hover {
        background-color: #ffffff;
        color: #001F61;
        cursor:pointer;
    }    


.rememberLi{
    background-color: #aa9595;
    border: 0;
    border-radius: 5px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 12px;
    padding: 3px 4px;
    position: relative;        
    letter-spacing: 1px;
    width: 100px;

}

.rememberLi:hover {
    background-color: #ffffff;
    color: #001F61;
    cursor:pointer;
}

Salin selepas log masuk

Perkara di atas berfungsi, lebih kurang seperti yang saya mahukan.

Berikut ialah versi dalam sistem yang lebih besar yang saya tidak akan siarkan kesemuanya.

Kad dihasilkan secara dinamik dan mempunyai kod berikut ditambah untuk menghasilkan jenis butang yang sama seperti dalam kad asal

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Some Javascript</title>
  <link rel="stylesheet" href="./someJavascript.css">
  <link rel="icon" href="favicons/favicon.ico" type="image/icon type">
</head>
<body>
  <div>



<p>and the javascript<br>
</p>

<pre class="brush:php;toolbar:false">let logToConsole=true;
var rowData={THId:'2', TaskName:'To climb a tree', TaskDesc:'Try using hands & feet'};
var remember=[];

function rememberProcess(remember){
    if(logToConsole) console.log('RememberProcess()');
for(i=0;i<remember.length;i+=2){
    console.log('Item ',i/2+1,' of ', remember.length/2,' items', 'Remember as ',remember[i], remember[i+1]);}        
}

function putDataIntoRemember(menuHeader,rowData){
    if(logToConsole) console.log('putDataIntoRemember()');
    remember.push(menuHeader);
    remember.push(rowData);
}

function deleteMenu(menuLu){
    if(logToConsole) console.log('deleteMenu()');
    menuLu.parentNode.removeChild(menuLu);
}

function showRememberMenu(){
    if(logToConsole) console.log('showRememberMenu()');

 if(document.querySelector('#rememberMenu') ) return; //menu already exists

    const remember_button = document.querySelector('#remember');
    const menuHeaders=['EXIT no save', 'as Student', 'as Manager', 'as Author', 'as Task' , 'as Note'];
    menuLu=document.createElement('lu');
    menuLu.id='rememberMenu';

for(let i=0;i<menuHeaders.length;i++){
    li=document.createElement('li');         
    li.innerText=menuHeaders[i]; 
    li.id=menuHeaders[i];
    li.classList.add('rememberLi');

    li.addEventListener('click', () => { //console.log('li button clicked', menuHeaders[i], rowData)
        if(menuHeaders[i]=='EXIT no save') {deleteMenu(menuLu);return};
    putDataIntoRemember(menuHeaders[i], rowData);//[header][rowData]       
    rememberProcess(remember);//do something with the stored data structure
    deleteMenu(menuLu);
      })

    menuLu.appendChild(li);
    }

remember_button.appendChild(menuLu);      
}

Salin selepas log masuk

dan javascript yang selebihnya hampir sama dengan yang asal

.remember_button {

        background-color: #5A5050;
        border: 0;
        border-radius: 5px;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
        color: #fff;
        font-size: 12px;
        padding: 3px 4px;
        position: relative;        
        letter-spacing: 1px;
        width: 100px;

}

    /*Button goes white on hover*/
.remember_button:hover {
        background-color: #ffffff;
        color: #001F61;
        cursor:pointer;
    }    


.rememberLi{
    background-color: #aa9595;
    border: 0;
    border-radius: 5px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 12px;
    padding: 3px 4px;
    position: relative;        
    letter-spacing: 1px;
    width: 100px;

}

.rememberLi:hover {
    background-color: #ffffff;
    color: #001F61;
    cursor:pointer;
}

Salin selepas log masuk

Peringatan tentang rupa sebelum diklik
Javascript listeners click bait

dan cara ia tersekat selepas diklik

Javascript listeners click bait

Saya tidak tahu apa masalahnya, dan Gemini tidak hadir pada salah satu kuliahnya mengenai perkara yang sama sekali tidak berkaitan tetapi Ai & saya akhirnya mengecilkan perkara dan kini nampaknya begitu mudah.

Jadi mengapa menu itu berterusan?

Atas ialah kandungan terperinci Umpan klik pendengar Javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn