자바 스크립트 및 HTML5를 사용하여 숨겨진 이미지 표시 (기존 게시물 관련)?

예는 마이크가 제시 한자바 스크립트 및 HTML5를 사용하여 숨겨진 이미지 표시 (기존 게시물 관련)?

<Input type='Button'>,

그 차이를했다.

이 아래

편집 코드는 내가 해당 게시물의 마지막 답변에 따라, 작업 예제를 얻으려고

HTML5, div, hidden, show on click

에 대한 질문에 후속이다.

내가 게시해야하는 방법에 대해 아직도 혼란 스러웠다. 원래 게시물에 대한 응답으로 내 질문을 '의견'으로 게시해야합니까? 또는 새로운 (내가 생각하는) 질문 일 때 게시글을 작성합니까? Mike가 추천 한 다른 게시글도 있습니다. 문제가 해결되었습니다.

내가) 1 수 있기를합니다 (DOM에 전구 화상 - 'WebVuCoolOldBulb-2.JPG'를 추가 거라고 내가 'DOM'를 잘 사용?)도

하고 이해하는 방법 로했다 WebVuCoolOldBulb-2.jp

코드는 Safari에서 '오류 콘솔보기'에서 오류없이 깨끗한 실행 - 전구의 사진과 함께 IMG/WebVuHedgehogCalicoCactusInBloomJoshuaTreeLaurelShimer.jpg 를 - 2) 내 선인장 사진을 교체합니다. 하지만 <button>의 기본 동작으로 전구 이미지

<html> 
<body> 
<form> 

    <img id="cactusPhoto" 
     src="img/WebVuHedgehogCalicoCactusInBloomJoshuaTreeLaurelShimer.jpg" 
     alt="Picture from Joshua Tree." 
     height="100" width="100" > 

    <button 
     type=button 
     onclick="show_image('WebVuCoolOldBulb-2.jpg', 276, 110, 'Light Bulb');"> 
    Add Lightbulb 
    </button> 

</form> 
<script> 
//https://stackoverflow.com/questions/25487865/html5-div-hidden-show-on-click 
function show_image(src, width, height, alt) { 
    var img = document.createElement("img"); 
    img.src = src; 
    img.width = width; 
    img.height = height; 
    img.alt = alt; 

    // This next line will just add it to the <body> tag 
    document.body.appendChild(img); 
} 
</script> 
</body> 
</html>

출처

2016-06-21 LaurelS

[양식을 제출하지하는 HTML 버튼]의 사용 가능한 복제 (http://stackoverflow.com/questions/2825856/html-button-to-not-submit-form) –

^문제는 단추가 양식을 제출하고 있다는 것입니다. 그 질문이 도움이 될 것입니다. –

미안 마이크 나는 그 게시에 대한 당신의 힌트를 놓쳤다. 게시 내용을 다시 읽고 후속 조치입니다. – LaurelS

을 사용 type=button를 추가하지 않습니다 것은 form 따라서 페이지가 언로드됩니다 제출하는 것입니다.
을 사용하여 요소에 액세스 할 수 있도록 image 요소의 참조를 전달하십시오.

function show_image(id, src, width, height, alt) { 
 
    var img = document.getElementById(id); 
 
    img.src = src; 
 
    img.width = width; 
 
    img.height = height; 
 
    img.alt = alt; 
 
}

<img id="cactusPhoto" src="img/WebVuHedgehogCalicoCactusInBloomJoshuaTreeLaurelShimer.jpg" alt="Picture from Joshua Tree." height="100" width="100"> 
 

 
<button type="button" onclick="show_image('cactusPhoto','WebVuCoolOldBulb-2.jpg',276,110,'Light Bulb');">Add Lightbulb</button>

출처

2016-06-21 18:39:31 Rayon

이것은 작동하지 않습니다. –

@MikeC, '

아니요,하지만 그 당시 나는 당신의 코드가 전혀 작동하지 않는다고 말했습니다. –

자바 스크립트 및 HTML5를 사용하여 숨겨진 이미지 표시 (기존 게시물 관련)?

답변

관련 문제