스크립트에 입력된 값을 페이지에 출력할 수 있나요? 채택완료

<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>