테스트 사이트 - 개발 중인 베타 버전입니다

자바스크립트 값을 div 태그안에 어떻게 넣을까요? 채택완료

지율아빠 4년 전 조회 2,079

진행률 표시 바를 만들려고 하고 있습니다.

 

진행률 표시 부트스트랩? 소스안에 자바스크립트 값을 넣어야 하는데... 어떻게 표현을 해야하는지 모르겠네요... 알려주시면 감사하겠습니다.

 

</p>

<p><script></p>

<p>    .....</p>

<p>    .....</p>

<p>    $('p_pro').text((data.percent*100).toFixed(1)) // 이 값을 아래의 자바스크립 값에 넣고 싶습니다.</p>

<p></script></p>

<p> </p>

<p><div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="자바스크립트 값" aria-valuemin="0" aria-valuemax="100" style="height:30px;padding-top:3px;width:자바스크립트 값%"></p>

<p><b>자바스크립트 값%</b>

</div></p>

<p>

 

참고로, <span class="p_pro"></span>에서는 값이 잘 나옵니다.

도와주시면 감사하겠습니다.

댓글을 작성하려면 로그인이 필요합니다.

답변 4개

채택된 답변
+20 포인트

보통 자바스크립트를 html 로 표현할 때는 document,write() 를 씁니다.

 

<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="자바스크립트 값" aria-valuemin="0" aria-valuemax="100" style="height:30px;padding-top:3px;width:자바스크립트 값%">

<b>자바스크립트 값%</b>

</div>

 

의 경우는 아래처럼 되겠죠.

 

<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="자바스크립트 값" aria-valuemin="0" aria-valuemax="100" style="height:30px;padding-top:3px;width:자바스크립트 값%">

<script>document.write("<b>자바스크립트 값%</b>")</script>

</div>

 

그래서 아래처럼...

 

<script>document.write("<b>" + $('p_pro').text((data.percent*100).toFixed(1)) + "%</b>")</script>

 

html 은 따옴표 처리하고 자바스크립트의 함수나 변수는 따옴표 처리를 하지 않습니다. 그리고 + 로 연결하구요.

 

제 답변은 div 까지 document.write() 에 넣은 것입니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

지율아빠
4년 전
아..그렇군요.. 너무 감사합니다.
기본적인 지식 없이 하다보니 질문자체도 어렵네요..
비타주리님 덕분에 하나 또 배웠습니다.
감사합니다..

댓글을 작성하려면 로그인이 필요합니다.

그냥 단순 무식하게...


<script>
    .....
    .....
    myData = $('p_pro').text((data.percent*100).toFixed(1));
    document.write("<div class='progress-bar progress-bar-warning progress-bar-striped' role=progressbar aria-valuenow=" + myData + " aria-valuemin=0 aria-valuemax=100 style=height:30px;padding-top:3px;width:" + myData + "%><b>" + myData + "%</b></div>");
</script>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

지율아빠
4년 전
친절한 답변 감사합니다.^^
비타주리님께서 알려주신 내용대로 하면 좋겠습니다만... 자바스크립트 값을 어떻게 본문에 표현하는지가 궁금해서요...

보통 php의 변수는 본문에 <?php echo $wr_1;?> 이렇게 쓰는데
자바스크립트 값인 $('p_pro').text((data.percent*100).toFixed(1)) 은 본문에 어떻게 표현하는 것일까요?

댓글을 작성하려면 로그인이 필요합니다.

cuwaaang
4년 전

스크립트에 $('.p_pro') 가 해당 대상의 클래스명을 말하는겁니다

 

앞에 . 이면 class 

#이면 id를 뜻하는거구요

 

클래스명은 동일하게 여러군데 쓰지만

이런경우

한페이지안에 중복되지않아야 오류발생을 막을수있겠죠

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

지율아빠
4년 전
친절한 답변 주셔서 감사합니다.^^
그런데 제가 궁금한 건....

자바스크립트의 함수 값?인 $('p_pro').text((data.percent*100).toFixed(1)) 값을 어떻게 본문(body)에 표현하는지입니다. 제가 설명이 많이 부족했나봅니다..ㅡ.ㅡ;;

보통 php의 변수는 본문에 <?php echo $wr_1;?> 이렇게 쓰는데
자바스크립트 값인 $('p_pro').text((data.percent*100).toFixed(1)) 은 본문에 어떻게 표현하는 것일까요?

댓글을 작성하려면 로그인이 필요합니다.

핑크빈
4년 전

</p>

<p>$('.progress-bar').attr('aria-valuenow','넣을값');</p>

<p>$('.progress-bar').css('width','넣을값%');</p>

<p>$('.progress-bar').next().text('넣을값%');</p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

지율아빠
4년 전
친절한 답변 주셔서 감사합니다.^^

보통 php의 변수는 본문에 <?php echo $wr_1;?> 이렇게 쓰는데
자바스크립트 값인 $('p_pro').text((data.percent*100).toFixed(1)) 은 본문에 어떻게 표현하는 것일까요?

$('.progress-bar').attr('aria-valuenow','넣을값'); 이라고 하셨는데..
-->$('.progress-bar').attr('aria-valuenow','$('p_pro').text()');

이렇게 하는건가요?

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인