스크립트에 입력된 값을 페이지에 출력할 수 있나요?
본문
설명이 조금 미흡하더라도 이해 부탁드립니다 ㅠㅠ
한참 구글링했는데도 검색어가 잘못된 것인가 도통 방법을 찾을 수가 없네요...
script.js 파일 내에 특정 문자열을 입력해놓고 페이지에 그 문자열을 불러오는 방법이 있을까요?
문자열 1 = '2022.04.06'
문자열 2 = '2022.04.07'
문자열 3 = '2022.04.08'
문자열 4 = '2022.04.09'
<span>[[[문자열 1 의 값 불러오기]]] START</span>
이렇게 넣어놓고 메인 페이지나 서브페이지에 저 내용을 뿌리고 싶습니다.
페이지 방식은 php를 쓰고있습니다.
답변 1
<style>
.spanOption { color:#ff0000; font-size:24px; font-weight:bold; }
</style>
<script>
string_1 = "2022.04.06";
string_2 = "2022.04.07";
string_3 = "2022.04.08";
string_4 = "2022.04.09";
</script>
<span>[[[<script>document.write(string_1);</script>]]] START</span>
<br>
<span>
<script>document.write("<span class='spanOption'>" + string_2 + "</span>");</script>
</span>
----------------------------------------------------
1. document.write(내용물)
2. 내용물이 html 내용이면 쌍따옴표
3. 자바스크립트 명령어라면 따옴표 없이
4. 쌍따옴표 안에 또 따옴표가 필요할 때는 홑따옴표
5. 연결할 때는 +
---------------------------------------------------
아니면 아래처럼 span 에 id 를 하나 주고 엘레먼트를 먼저 로딩시킨 후 동적으로 처리해도 됩니다.
이럴 때는 innerHTML 이나 innerText 를 주고 따옴표 방식은 동일합니다.
<span id=my></span>
<script>
string_1 = "2022.04.06";
string_2 = "2022.04.07";
string_3 = "2022.04.08";
string_4 = "2022.04.09";
my.innerHTML = "[[[" + string_1 + "]]] START";
</script>
--------------------------------------------
버튼이 필요한 경우는 아래처럼 함수를 하나 만들고...
<button id=btn_1 style=cursor:pointer onclick=you(string_1)>1</button>
<button id=btn_2 style=cursor:pointer onclick=you(string_2)>2</button>
<button id=btn_3 style=cursor:pointer onclick=you(string_3)>3</button>
<button id=btn_4 style=cursor:pointer onclick=you(string_4)>4</button>
<br>
<span id=my></span>
<script>
string_1 = "2022.04.06";
string_2 = "2022.04.07";
string_3 = "2022.04.08";
string_4 = "2022.04.09";
function you(we) {
my.innerHTML = "[[[" + we + "]]] START";
}
you(string_1);
</script>
-------------------------------------------------
마지막으로 버튼 4개의 태그형태가 동일하니 반복문으로 돌려서
<script>
for (i = 1; i <= 4; i++) {
document.write("<button id=btn_" + i + " style=cursor:pointer onclick=you(string_" + i + ")>" + i + "</button> ");
}
</script>
<br>
<span id=my></span>
<script>
string_1 = "2022.04.06";
string_2 = "2022.04.07";
string_3 = "2022.04.08";
string_4 = "2022.04.09";
function you(we) {
my.innerHTML = "[[[" + we + "]]] START";
}
you(string_1);
</script>
오오 상황에 맞춰서 상세하게 풀어주시다니 ㅠㅠ 너무 감사합니다.
