javascript innerText로 링크 걸고, 없애기

juno·2022년 7월 7일
0

자바스크립트

목록 보기
5/9
const jsSkill = document.querySelector("div.skill-link"); //링크를 걸고 없앨 공간이다.  
const jsImg = document.querySelector(".js-img"); //이미지1번이라고 생각하자
const pythonImg = document.querySelector(".python-img") // 이미지2번이라고 생각하자
const newList = document.querySelector("div.new-list")// 하나의 공간 여기를 벗어나면 링크를 지울것이다.
//접근할 링크를  변수로 선언
const jsLink = "<a href='https://kimjuno97.github.io/brckGame-js-/' target = _blank>벽돌게임</a><br><a href ='https://kimjuno97.github.io/color-Zilla/' target = _blank>칼라 픽</a>";
const pythonLink = "<a href='https://github.com/kimjuno97/Python-practice' target = _blank>비트코인 자동매매</a>"

jsImg.addEventListener('mouseover',jsSkillList);
newList.addEventListener('mouseleave',jsSkillListDel);
pythonImg.addEventListener('mouseover',pythonList);

function jsSkillList() {
    jsSkill.innerHTML = jsLink
}

//innerHTML로 추가했던 text를 지워줄 함수
function jsSkillListDel(){    
    jsSkill.innerHTML = '';
}

function pythonList() {
    jsSkill.innerHTML = pythonLink
}

펌할때 사용하세요

const jsSkill = document.querySelector(이벤트 발생시 링크추가할공간);
const jsImg = document.querySelector(이벤트 넣을공간1);
const pythonImg = document.querySelector(이벤트 넣을공간2);
// 공간은 더 추가해도된다.
const newList = document.querySelector(이벤트 발생시 링크제거할 공간)

const 링크2개예시 = "<a href='여기에링크넣기' target = _blank>text1</a><br><a href ='여기에링크넣기' target = _blank>text2</a>";
const 링크1개 = "<a href='여기에링크넣기' target = _blank>text</a>"

jsImg.addEventListener('mouseover',링크2개예시);
newList.addEventListener('mouseleave',jsSkillListDel);
pythonImg.addEventListener('mouseover',링크1개예시);

function jsSkillList() {
    jsSkill.innerHTML = 링크2개예시
}
//추가한 부분 공백으로 만들어 지웠다.
function jsSkillListDel(){    
    jsSkill.innerHTML = '';
}

function pythonList() {
    jsSkill.innerHTML = 링크1개
}

한글로 타이핑 한 부분은 본인 코드에 적용 시 바꿔주면 된다.

위 방법 외에 더 깔끔한 방법은 분명 있습니다..!

profile
안녕하세요 인터랙션한 웹 개발을 지향하는 프론트엔드 개발자 입니다. https://kimjunho97.tistory.com => 블로그 이전 중

0개의 댓글