코딩 고수분들 도와주세요! option-info

본문 바로가기

코딩 고수분들 도와주세요! option-info

작성일 2024.03.29댓글 2건
    게시물 수정 , 삭제는 로그인 필요

<div class="product_ingredient">
<h1>영양성분 <span class="sub_h1">(1팩 기준 / 100g당 1일 영양성분 기준치에 대한 비율)</span></h1>
<div class="select_btn_wrap" onchange="changeText()">
<select id="dropdown">
<option value="option1">한입 닭가슴살 저염 클래식 100g</option>
<option value="option2">한입 닭가슴살 소이갈릭 100g</option>
<option value="option3">한입 닭가슴살 블랙페퍼 100g</option>
<option value="option4">한입 닭가슴살 바질크림 100g</option>
<option value="option5">한입 닭가슴살 볼케이노 100g</option>
<option value="option6">한입 닭가슴살 스파이시로제 100g</option>
<option value="option7">불닭소스 닭가슴살 100g</option>
<option value="option8">어니언크림 닭가슴살 100g</option>
<option value="option9">숯불바베큐맛 닭가슴살 100g</option>
<option value="option10">클래식 닭가슴살 100g</option>
<option value="option11">블랙페퍼 닭가슴살 100g</option>
</select>
<button id="ingredient_popup_btn">분석결과 확인하기</button>
<!-- 성적서 팝업 -->
<div id="ingredient_popup">
<div class="ingredient_popup_box">
<h3 id="ingredient_popup_head">
<br>
</h3>
<div id="popup_close_btn">
<div class="popup_close_btn_t">
<br>
</div>
<div class="popup_close_btn_b">
<br>
</div>
</div>
<div class="ingredient_popup_cont">
<img id="ingredient_popup_img" src="" alt="시험성적서">
</div>
</div>
<div id="ingredient_popup_bg">
<br>
</div>
</div>
</div>
<p id="info">원하시는 제품의 영양성분을 알고 싶다면 위 리스트에서 선택해주세요.</p>
<div class="option-info" id="option-info1">
<ul class="option-info-text">
<li><span>열량</span><span>103.0kcal</span></li>
<li><span>단백질</span><span>20.84g</span></li>
<li><span>나트륨</span><span>81.21mg</span></li>
<li><span>탄수화물</span><span>2.30g</span></li>
<li><span>지방</span><span>1.16g</span></li>
<li><span>트랜스지방</span><span>0.01g</span></li>
<li><span>포화지방</span><span>0.24g</span></li>
<li><span>콜레스테롤</span><span>63.19g</span></li>
<li><span>당류</span><span>0.67g</span></li>
</ul>
<div class="option-image" id="image1">https://rmmkt.cafe24.com/web/upload/%ED%95%9C%EC%9E%85%20%EC%98%81%EC%96%91%EC%84%B1%EB%B6%84/%ED%95%9C%EC%9E%85%20%ED%81%B4%EB%9E%98%EC%8B%9D.jpeg</div>
</div>
<div class="option-info" id="option-info2">
<ul class="option-info-text">
<li><span>열량</span><span>123.05kcal</span></li>
<li><span>단백질</span><span>15.36g</span></li>
<li><span>나트륨</span><span>307.84mg</span></li>
<li><span>탄수화물</span><span>13.67g</span></li>
<li><span>지방</span><span>0.77g</span></li>
<li><span>트랜스지방</span><span>0.01g</span></li>
<li><span>포화지방</span><span>0.18g</span></li>
<li><span>콜레스테롤</span><span>35.53g</span></li>
<li><span>당류</span><span>8.55g</span></li>
</ul>
<div class="option-image" id="image2">https://rmmkt.cafe24.com/web/upload/%ED%95%9C%EC%9E%85%20%EC%98%81%EC%96%91%EC%84%B1%EB%B6%84/%ED%95%9C%EC%9E%85%20%EC%86%8C%EC%9D%B4%EA%B0%88%EB%A6%AD.jpg</div>
</div>
<div class="option-info" id="option-info3">
<ul class="option-info-text">
<li><span>열량</span><span>108.59kcal</span></li>
<li><span>단백질</span><span>18.85g</span></li>
<li><span>나트륨</span><span>189.09mg</span></li>
<li><span>탄수화물</span><span>3.82g</span></li>
<li><span>지방</span><span>1.99g</span></li>
<li><span>트랜스지방</span><span>0.01g</span></li>
<li><span>포화지방</span><span>0.38g</span></li>
<li><span>콜레스테롤</span><span>61.98g</span></li>
<li><span>당류</span><span>0.22g</span></li>
</ul>
<div class="option-image" id="image3">https://rmmkt.cafe24.com/web/upload/%ED%95%9C%EC%9E%85%20%EC%98%81%EC%96%91%EC%84%B1%EB%B6%84/%ED%95%9C%EC%9E%85%20%EB%B8%94%EB%9E%99%ED%8E%98%ED%8D%BC.jpg</div>
</div>
<div class="option-info" id="option-info4">
<ul class="option-info-text">
<li><span>열량</span><span>107.15kcal</span></li>
<li><span>단백질</span><span>17.41g</span></li>
<li><span>나트륨</span><span>211.02mg</span></li>
<li><span>탄수화물</span><span>2.65g</span></li>
<li><span>지방</span><span>2.99g</span></li>
<li><span>트랜스지방</span><span>0.01g</span></li>
<li><span>포화지방</span><span>1.42g</span></li>
<li><span>콜레스테롤</span><span>46.79g</span></li>
<li><span>당류</span><span>1.83g</span></li>
</ul>
<div class="option-image" id="image4">https://rmmkt.cafe24.com/web/upload/%ED%95%9C%EC%9E%85%20%EC%98%81%EC%96%91%EC%84%B1%EB%B6%84/%ED%95%9C%EC%9E%85%20%EB%B0%94%EC%A7%88%ED%81%AC%EB%A6%BC.jpg</div>
</div>
<div class="option-info" id="option-info5">
<ul class="option-info-text">
<li><span>열량</span><span>105.69kcal</span></li>
<li><span>단백질</span><span>16.53g</span></li>
<li><span>나트륨</span><span>258.80mg</span></li>
<li><span>탄수화물</span><span>7.44g</span></li>
<li><span>지방</span><span>1.09g</span></li>
<li><span>트랜스지방</span><span>0.01g</span></li>
<li><span>포화지방</span><span>0.23g</span></li>
<li><span>콜레스테롤</span><span>40.10g</span></li>
<li><span>당류</span><span>1.96g</span></li>
</ul>
<div class="option-image" id="image5">https://rmmkt.cafe24.com/web/upload/%ED%95%9C%EC%9E%85%20%EC%98%81%EC%96%91%EC%84%B1%EB%B6%84/%ED%95%9C%EC%9E%85%20%EB%B3%BC%EC%BC%80%EC%9D%B4%EB%85%B8.jpg</div>
</div>
<div class="option-info" id="option-info6">
<ul class="option-info-text">
<li><span>열량</span><span>104.65kcal</span></li>
<li><span>단백질</span><span>17.54g</span></li>
<li><span>나트륨</span><span>162.64mg</span></li>
<li><span>탄수화물</span><span>4.19g</span></li>
<li><span>지방</span><span>1.97g</span></li>
<li><span>트랜스지방</span><span>0.02g</span></li>
<li><span>포화지방</span><span>0.75g</span></li>
<li><span>콜레스테롤</span><span>54.14g</span></li>
<li><span>당류</span><span>1.12g</span></li>
</ul>
<div class="option-image" id="image6">https://rmmkt.cafe24.com/web/upload/%ED%95%9C%EC%9E%85%20%EC%98%81%EC%96%91%EC%84%B1%EB%B6%84/%ED%95%9C%EC%9E%85%20%EC%8A%A4%ED%8C%8C%EC%9D%B4%EC%8B%9C%EB%A1%9C%EC%A0%9C.jpeg</div>
</div>
<div class="option-info" id="option-info7">
<ul class="option-info-text">
<li><span>열량</span><span>138.6kcal</span></li>
<li><span>단백질</span><span>20.9g</span></li>
<li><span>나트륨</span><span>491.9mg</span></li>
<li><span>탄수화물</span><span>8.7g</span></li>
<li><span>지방</span><span>2.3g</span></li>
<li><span>트랜스지방</span><span>0.01g</span></li>
<li><span>포화지방</span><span>0.4g</span></li>
<li><span>콜레스테롤</span><span>47.7g</span></li>
<li><span>당류</span><span>7.7g</span></li>
</ul>
<div class="option-image" id="image7">https://rmmkt.cafe24.com/web/upload/firechicken_sauce_100g_ingredient-1.jpg</div>
</div>
<div class="option-info" id="option-info8">
<ul class="option-info-text">
<li><span>열량</span><span>150.5kcal</span></li>
<li><span>단백질</span><span>19.3g</span></li>
<li><span>나트륨</span><span>409.8mg</span></li>
<li><span>탄수화물</span><span>5.7g</span></li>
<li><span>지방</span><span>5.6g</span></li>
<li><span>트랜스지방</span><span>0.06g</span></li>
<li><span>포화지방</span><span>1.1g</span></li>
<li><span>콜레스테롤</span><span>60.0g</span></li>
<li><span>당류</span><span>3.0g</span></li>
</ul>
<div class="option-image" id="image8">https://rmmkt.cafe24.com/web/upload/onion_sauce_100g_ingredient-1.jpg</div>
</div>
<div class="option-info" id="option-info9">
<ul class="option-info-text">
<li><span>열량</span><span>142.7kcal</span></li>
<li><span>단백질</span><span>19.5g</span></li>
<li><span>나트륨</span><span>494.7mg</span></li>
<li><span>탄수화물</span><span>11.6g</span></li>
<li><span>지방</span><span>2.1g</span></li>
<li><span>트랜스지방</span><span>0.01g</span></li>
<li><span>포화지방</span><span>0.4g</span></li>
<li><span>콜레스테롤</span><span>52.1g</span></li>
<li><span>당류</span><span>7.9g</span></li>
</ul>
<div class="option-image" id="image9">https://rmmkt.cafe24.com/web/upload/barbecue_sauce_100g_ingredient-1.jpg</div>
</div>
<div class="option-info" id="option-info10">
<ul class="option-info-text">
<li><span>열량</span><span>103.3kcal</span></li>
<li><span>단백질</span><span>20.2g</span></li>
<li><span>나트륨</span><span>212.2mg</span></li>
<li><span>탄수화물</span><span>1.0g</span></li>
<li><span>지방</span><span>2.1g</span></li>
<li><span>트랜스지방</span><span>0.01g</span></li>
<li><span>포화지방</span><span>0.3g</span></li>
<li><span>콜레스테롤</span><span>62.1g</span></li>
<li><span>당류</span><span>0.7g</span></li>
</ul>
<div class="option-image" id="image10">https://rmmkt.cafe24.com/web/upload/classic_original_100g_ingredient-1.jpg</div>
</div>
<div class="option-info" id="option-info11">
<ul class="option-info-text">
<li><span>열량</span><span>103.1kcal</span></li>
<li><span>단백질</span><span>20.3g</span></li>
<li><span>나트륨</span><span>234.5mg</span></li>
<li><span>탄수화물</span><span>1.0g</span></li>
<li><span>지방</span><span>2.0g</span></li>
<li><span>트랜스지방</span><span>0.01g</span></li>
<li><span>포화지방</span><span>0.3g</span></li>
<li><span>콜레스테롤</span><span>55.0g</span></li>
<li><span>당류</span><span>0.6g</span></li>
</ul>
<div class="option-image" id="image11">https://rmmkt.cafe24.com/web/upload/blackpepper_original_100g_ingredient-1.jpg</div>
</div>
안녕하세요! 제가 영양성분 코딩 하는게 있는데 여기에서 info10번 까지는 이미지와 영양성분 표시가 제대로 코딩이 되는데 info11번 부터는 영양성분 표시가 안나옵니다.. 이미지는 다른 이미지로 표시 되구요.. 여기에서 11번을 나오게 하려면 추가해야 될 부분이 있을까요? 

하단 이미지도 참고 부탁드리겠습니다!
해결 부탁드리겠습니다 ㅠ 


info1 - 표시 잘 되는것



info11 - 표시 안되는것





profile_image 익명 작성일 -

보여주신 html 상에서는 문제가 없어보입니다.

select box를 클릭하면 onchange="changeText()"

changeText() 를 실행하는데 자바스크립트에서 changeText() 찾아서 이 부분을 수정해야 할 것 같네요.

changeText() 함수 찾아서 소스 올려주시면 더 정확히 말씀드릴 수있을 것 같은데

아마 아래처럼 하시면 되지 않을 까 쉽네요..(changeText() 찾아서 option10 이 어떻게 처리되었는지 보시고 그대로 copy하여 값만 11로 변경하시면 될 듯 합니다)

​

} else if (value == 'option11'){

var option = document.getElementById('option-info11);

option.style.display = 'block';

}

profile_image 익명 작성일 -

자바스크립트도 있는것 같은데 같이 올리서야 할 것 같네요.

<div class="select_btn_wrap" _onchange="changeText()">

여기에서 값이 바뀌면 changeText() 함수가 동작하는데

그 안에서 어떤걸 보여줄지 결정합니다.

그런데 changeText() 함수 내용이 없으니...

연관된 질문 답변 리스트

ㅠ.ㅠ;; 고수님들 도와주세요..

... Information[] info = new Information[10]; int count... 진짜 코딩 고수님들만 풀 수 있습니다... 도와주세요 배열 2가 삭제되고 배열 3을 그...

html 코딩 도와주세요

밑에 처럼 만들고 싶은데 테이블이랑 아이디 찾기 비밀번호 찾기 간격 붙이는걸 어떻게 하는지 모르겠어요 그리고 hr을 써서 선만들려고 했는데 선이 안만들어 지고...

html5, 코딩도와주세요

자바 고수님들 도와주세요ㅠㅠ

... for(var a=0;a<tcnt;a++) { if(arrTerm[a]==v)tarobj.options[index++]=new Option... 각 항목 마다 입력전압 저항등이 나오도록 코딩 좀 도와주세요....

액셀 vba 고수분들 좀 도와주세요.

... 위의 행렬 A와 B를 배열에 넣는 것은 다음 코딩을 참조하세요. ----------------------------------------------- Option Explicit Sub matSum() Dim A(2, 2)...