간단한 자바스크립트 질문이요 ㅜㅜ
본문
그누보드q&a에 올릴만한 질문은 아닌데 어디 여쭤볼 데가 없어서 올립니다 ㅜ.ㅜ
일단 저는 자바스크립트 완~~~~전 초보구요... 거의 모르는수준이라고 보셔도 됩니다
input창에 글씨가 한 글자라도 입력됐다면 x버튼이 뜨고, 글씨가 하나도 없으면 그 버튼이 없어지는 것을 만들고 싶습니다.
<input type="text" id="" name="" class="search_field" value="">
<button class="reset" onclick="clearInput()">x</button>
인풋창이랑 버튼이구요... input의 value 길이가 0이면 버튼을 안보이게, 한글자 이상이면 버튼이 나오게... 이런 접근으로 서치하면서 어찌저찌 입력해보았습니다
var el = document.getElementsByClassName('search_field');
var res = document.getElementsByClassName('reset');
if(el.value.length < 0.1){
res.style.display = 'none';
} else {
res.style.display = 'block';
};
그래서 이렇게 해보았는데 음 , , ,역시 안됩니다
제가 자바스크립트는 정말 모르겠어서 질문 올립니다 ㅜ 읽어주셔서 감사합니다
답변 2
<input type="text" id="el" name="" class="search_field" value="">
<button class="reset" id="res" style=display:none onclick="clearInput()">x</button>
<script>
el.onkeyup = function() {
res.style.display = el.value.trim() == "" ? "none" : "inline-block";
}
</script>
http://www.mediaplayer.kr/main/bbs/html_editor.php
좌측장에 코드 넣고 결과확인 해 보세요.
글구 이런 건 어떤 측면에서 보면 쉬운 게 절대 아니에요.
또 아이디가 아니라 클래스로 땡기려면 [0] 이나 [1] 같은 배열원소를 같이 붙여야 합니다.
안녕하세요! 일단 너무 감사드립니다
보내주신 링크에서도 잘 먹히고 html에 따로 빼서 쳐봤을 때도 잘 먹히는데...
제가 만들고있는 연습용 html에선 저게 안먹히네요ㅜㅜ 다른곳에서 잘되는거 보니까 코드문제는 아닌것같은데 경로문제일까요?,, 인풋이랑 버튼이 특정 태그로 감싸져있어서 그런가요 음 상관없는거같은데 ㅜㅜ
아 그리고 제가 저거를 레이어팝업에다가 적용시키려고하는데 이런거랑은 상관없는거죠..?ㅠ
el 또는 res 라는 동일이름을 가진 변수나 아이디가 있나 확인해보고 그게 존재한다면 제 코드에서 아이디를 다른 이름으로 바꿔보세요