몸통을 대체 어떻게 해야 할까요? 거부하는 이유가?
본문
요즘 거부하는 자가 범인이라는 둥 말이 많은데요,,ㅋ
대체 내 코드의 범인은 무엇일까요? ㅜㅜ
인풋에 url이 들어오면 불필요한 꼬리를 짤라내도록 말끔하게 해치웠습니다.
그런데 나의 코드의 몸통이
+'<td><input type="url" id="p_url'+(index)+'" pattern="https?://.+" title="http:// 또는 https://" name="p_url[]" value="'+value_arr['p_url']+'" onfocus="this.select()" onclick="url_change(this);"></td>'
스크립트로 input을 동적추가하는 방식으로 되어 있습니다.
그러다 보니 input추가할때 문제가 생겼는데 추가한 input이 몇번째인 모르는 것 같아
아래 코드가 작동이 안되는 겁니다.
코드는 기다란 네이버url이 인풋에 들어오면
https://shop.naver.com/item.htm?id="+id 요렇게 id값까지만 나오게 하고 뒤에는 잘라버리는 기능입니다.
*이런 거는 거의 해결이 안되던데 그래도 혹시나 질문드려봅니다.
function url_change(obj){
var index = $("#p_url").index(this);
var text = $("#p_url:eq("+index+")").val() || "";
var naver = "https://shop.naver.com";
if(text.indexOf(naver) != -1) {
var url_string = $("#p_url:eq("+index+")").val();
var url = new URL(url_string);
var id = url.searchParams.get("id");
console.log(id);
$("#p_url:eq("+index+")").val("https://shop.naver.com/item.htm?id="+id);
}
}
소스보기 해보니 input추가할 때 #p_url1, 2, 3, 4~ 이런식으로 스크립트 부분에 넘버링이 되어야 하는데 안되네요. "#p_url:eq("+index+")" 이게 아닌거 같아요..
생각해보니 만일 인풋이 3개 추가되면
이 코드의 index의 값이
변수로 0-2까지로 바뀌거나.....그런데 아무래도 이건 아닌거 같고,
그보다는 추가된 인풋의 특정 것을 하면
this로 처리해야 할거 같은데요,,,,
답변 1
input 를 여러개 추가하면서 id의 번호가 플러스가 되는 코드를 사용하려면 for 문으로 돌려야 합니다.
예컨대 my1 부터 my7 까지 input 를 만든다면...
<script>
for (i = 1; i <=7; i++) document.write("<input id=my" + i + " type=text>");
</script>
그 외 동일 클래스를 줘서 input 를 for 문으로 돌려 만들어도 됩니다.
이럴 때는 클래스네임으로 배열을 갖게 되어 my[0] 부터 my[6] 까지가 되구요.
함수를 만들더라도 아이디에 번호를 더해주는 코드가 필요하다면
"반드시" "항상" "필연적으로" 포문이나 와일문 같은 반복구문 처리가 필요합니다.
for(i=0; i<50; i++) {
마이 코드
}
이렇게 50개로 지정해서 감싸니 되는데
물론
var url_string = $("#p_url:eq("+index+")").val(); 도
var url_string = $("#p_url" + i ).val(); 이런식으로 i로 해주고요.
-------------------------------
그런데
if(text.indexOf(naver) != -1) { 이부분이 에러가 있네요,
인풋추가는 아직 또는 몇개 안한 상태이니
나머지 부분이 없어서 indexOf 부분에 에러가 있는거 같습니다.