자바스크립트 리스너 클릭 미끼
- Susan Sarandon원래의
- 2024-11-23 09:16:45491검색
아주 잘 작동하는 테스트 파일에 코드를 작성한 후 이를 메인 코드에 통합해야 했는데 잘 되지 않았습니다.
기본 코드는 "기억하세요"라는 버튼이 하나 있는 간단한 HTML 파일로 구성되었습니다.
showRememberMenu()라는 함수에 대한 onclick이 있었습니다. 해당 기능은 버튼 아래에 표시되는 메뉴를 생성했습니다.
드롭다운 메뉴에는 사용자가 데이터를 기억하려고 하는 이유를 상기시키기 위해 데이터에 추가할 수 있는 여러 태그가 있습니다. (저는 나이가 많아서 기억하는 데 도움이 모두 필요합니다.)
버튼을 클릭하고 드롭다운 메뉴를 보고 원하는 태그를 클릭하면 보고 있는 데이터가 해당 태그와 함께 배열에 저장됩니다. 메뉴를 클릭하면 사라집니다.
그때 제 임무는 그것을 더 큰 스크립트에 넣어서 그것이 똑같이 작동하는지 확인하는 것이었습니다... 아, 아닐 수도 있습니다. 메뉴를 클릭하고, 태그와 함께 데이터를 저장하고... 무엇을요? 왜 메뉴가 아직도 거기에 있나요? 클릭하자마자 원본에서 삭제됐네요. 왜 사라지지 않는 걸까요?
그리고 '저장하지 않고 종료' 태그를 클릭해도 메뉴가 계속 표시됩니다.
저는 사용자로서 데이터베이스의 데이터가 포함된 카드를 보고 있었습니다. 이 버튼을 클릭하는 것은 나중에 사용할 수 있도록 해당 데이터를 저장하는 방법이었습니다. 여기서 새로운 버튼이 있는 카드를 볼 수 있습니다.
해당 버튼을 클릭하면 드롭다운이 표시되고 이 데이터를 기억하는 데 관련된 태그를 선택할 수 있습니다...
이제 다른 카드에도 동일한 작업을 수행하면 일부 작업을 완료하는 데 필요한 모든 데이터가 확보됩니다. 그런데 왜 "&%!!! 해당 메뉴는 사라지지 않나요?
아이디어가 부족하여 동료 Gemini the AI에게 연락했습니다. 그것은 내가 이미 가지고 있던 코드와 정확히 같은 첫 번째 솔루션을 제공했습니다. 많은 것을 제안했지만 그 중 아무 것도 효과가 없었습니다.
노드와 요소의 존재를 확인하면 모든 것이 좋아질 것이라고 확신했지만 그렇지 않았습니다.
작동하지 않는 내용을 듣고 타이밍 문제, 지연이 필요할 수도 있다는 강의를 듣는 데 약 한 시간이 걸렸습니다. 실제로는 관련이 없었지만 팀으로서 천천히 문제를 해결했습니다.
이 문제를 해결하고 싶다면 더 짧은 시간에 해결할 수 있을 것입니다.
작동하는 원본 초안 코드는 다음과 같습니다...
<!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);
}
CSS가 일부 있지만 문제와 관련이 없습니다
.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;
}
위 내용은 제가 원하는 대로 작동합니다.
여기에 더 큰 시스템 내부 버전이 있으므로 모두 게시하지는 않겠습니다.
카드는 동적으로 생성되며 원본과 동일한 종류의 버튼을 생성하기 위해 다음 코드가 추가됩니다
<!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);
}
나머지 자바스크립트는 원본과 거의 동일합니다
.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;
}
클릭하기 전의 모습을 알림
클릭 후 작동이 멈추는 이유
문제가 무엇인지 전혀 몰랐고 Gemini는 전혀 관련 없는 내용으로 강의를 하러 나갔지만 Ai와 나는 마침내 문제를 좁혀서 이제는 매우 단순해 보입니다.
그러면 왜 메뉴가 유지되나요?
위 내용은 자바스크립트 리스너 클릭 미끼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!