2016-03-12 3 views
0

я продолжаю получать ReferenceError: toggleExpand is not defined в консоли на светлячок, когда я нажимаю IMGJavascript IMG OnClick ссылочной ошибки функционировать

Я пытаюсь получить изображение для увеличения, плавающим в центре экрана на щелчке, не JQuery, чистый Javascript , html, css.

HTML

<body> 
    <script type="text/javascript"> 
    function toggleExpand(id){ 
     var doc = document.getElementById(id); 
     doc.style.z-index = "1"; 
     doc.style.width = "512px"; 
     doc.style.align = "center"; 
    } 
    </script> 
    <img id="img1" onclick="toggleExpand('img1');" src="I:\Images\image.jpg" alt="image" style="width:128px; height:auto; cursor:pointer; z-index:0"/> 
</body> 
+0

jsFiddle поможет нам! –

+0

Попытайтесь сменить тег скрипта на Head и отметьте один раз. – Sravan

+0

Я не могу писать сценарии в голове, делать ограничения в moodle. – Drew

ответ

0

doc.style.z-index изменения в doc.style['z-index'] и проверить

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 

 
    <body> 
 
    <script type="text/javascript"> 
 
     function toggleExpand(id) { 
 
     var doc = document.getElementById(id); 
 
     doc.style['z-index'] = "1"; 
 
     doc.style.width = "512px"; 
 
     doc.style.align = "center"; 
 
     } 
 
    </script> 
 
    <img id="img1" onclick="toggleExpand('img1');" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Alexanderplatz_Stadtmodell_1.jpg/1920px-Alexanderplatz_Stadtmodell_1.jpg" alt="image" style="width:128px; height:auto; cursor:pointer; z-index:0" 
 
    /> 
 
    </body> 
 
</body> 
 

 
</html>

+0

@downvoter, это будет очень полезно, если может привести к какой-то причине .. –

1

Это мой код, используемый в этом может использоваться этот

<html> 
    <head> 
     <script> 
      function toggle(){ 
       var doc = document.getElementById("divSection"); 

        doc.style.z-index = "1"; 
        doc.style.width = "512px"; 
        doc.style.align = "center"; 
      } 
     </script> 
    </head> 

    <body> 
     <p>Click the button to trigger a function.</p> 
     <p class="button" onclick="toggle()">Show/hide</p> 

    </body> 
</html> 
0

Почему вы передаете свой id как аргумент функции! почему бы не использовать что-то вроде этого:

<body> 
<img id="img1" onclick="toggleExpand();" src="I:\Images\image.jpg" alt="image" style="width:128px; height:auto; cursor:pointer; z-index:0"/> 

<script type="text/javascript"> 
function toggleExpand(){ 
    var doc = document.getElementById('img1'); 
    doc.style.z-index = "1"; 
    doc.style.width = "512px"; 
    doc.style.align = "center"; 
} 
</script>  
</body> 
0

Лучше сделать это.

var doc = document.getElementById(id)  
doc.addEventListener('click',toggleExpand); 
1

Прежде, свойство не может содержать -
так изменить его CamelCase zIndex или завернуть в скобках ["z-index"]


также, странно никто не упомянул, нет необходимости передавать идентификатор! Вы уже есть this ссылка на щелкнули со ссылкой HTMLIMGElement,
да так, просто использовать onclick="toggleExpand(this);" без ID

Кроме того, я вижу, что вы назвали вашу функцию TOGGLE... так давайте тумблер!

img[onclick]{vertical-align:top; cursor:pointer; }
<script> 
 
    function toggleExpand(el){ 
 
    var io = el.tog ^= 1;     // Store the toggle state 
 
    el.style.zIndex = io ? 1 : 0; 
 
    el.style.width = (io ? 256 : 128) +"px"; 
 
    } 
 
</script> 
 

 
<img onclick="toggleExpand(this);" src="https://www.gravatar.com/avatar/6edc0ac8cd9f3e790389f3284eaaf9e9?s=32&d=identicon&r=PG" alt="image" style="width:128px; height:auto; z-index:0"/> 
 
<img onclick="toggleExpand(this);" src="https://i.stack.imgur.com/1ZIkv.jpg?s=48&g=1" alt="image" style="width:128px; height:auto; z-index:0"/>

jsBin playground

Смежные вопросы