2013-08-07 3 views
2

Я пишу простой код для изменения видимости изображения при нажатии кнопки, но мой document.getElementById().value подходит как undefined. (Я попытался заменить .value на .display - тот же результат).getElementById(). Value Returning Undefined

В чем может быть проблема?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
    <script> 
     function hideImage(imageId){ 
      document.getElementById(imageId).visibility="hidden"; 
     } 
     function showImage(imageId){ 
      document.getElementById(imageId).visibility="visible"; 
     } 
     function switchVis(imageId){ 
      var curVis = document.getElementById(imageId).value; 
      if(document.getElementById(imageId).value=="hidden"){ 
       document.getElementById("output").innerHTML="hidden"; 
       showImage(imageId); 
      } 
      else if(document.getElementById(imageId).value=="visible"){ 
       hideImage(imageId); 
       document.getElementById("output").innerHTML="visible"; 
      } 
      else{ 
       alert("Visibility Issue!\nVisibility value is " + curVis); 
      } 
     } 
    </script> 
</head> 
<body> 
    <img src="images/k3.gif" id="k3"><p> 
    <button onclick=switchVis('k3')>Visibility</button> 
    <div id="output"></div> 
</body> 

+0

Что вы получаете в curVis во время отладки ??? u отлаживал ваш код javascript ??? – Anuj

+0

Я пробовал отладку с помощью инструментов разработчика Chrome. curVis возвращается как неопределенный - это часть вывода в поле предупреждения. –

+0

проверить ответ i hv опубликовано – Anuj

ответ

0

Вы не можете просто получить style значение с помощью document.getElementById().value. getComputedStyle() дает окончательные использованные значения всех свойств CSS элемента. Возвращаемый стиль - это объект CSSStyleDeclaration, который можно использовать для получения значения вашего стиля. Попробуйте следующий код. Он должен работать.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<script> 
    function hideImage(imageId){ 
     document.getElementById(imageId).style.visibility="hidden"; 
    } 
    function showImage(imageId){ 
     document.getElementById(imageId).style.visibility="visible"; 
    } 
    function switchVis(imageId){ 
     var curVis = document.getElementById(imageId); //your element 
     style = window.getComputedStyle(curVis); //returns CSSStyleDeclaration object 
     curVis = style.getPropertyValue('visibility'); //now get your css value 

     if(curVis=="hidden"){ 
      document.getElementById("output").innerHTML="visible"; 
      showImage(imageId); 
     } 
     else if(curVis=="visible"){ 
      hideImage(imageId); 
      document.getElementById("output").innerHTML="hidden"; 
     } 
     else{ 
      alert("Visibility Issue!\nVisibility value is " + curVis); 
     } 
    } 
</script> 
</head> 
<body> 
    <img src="images/k3.gif" id="k3" value="check"><p> 
    <button onclick="switchVis('k3')">Visibility</button> 
    <div id="output"></div> 
</body> 
0

Вы можете получить видимость так: jsfiddle Так что в document.getElementById('myId').style.visibility

// сделать видимыми
document.getElementById('myId').style.visibility='visible'

// сделать скрытый
document.getElementById('myId').style.visibility='hidden'

Вместо ценности, которую вы использовали, есть innerHTML. Значение для входных элементов.

+0

Спасибо Ярославу, но я получаю тот же результат. –

+0

Джефф, что вы подразумеваете под таким же результатом? –

+0

Я имел в виду, что curVis все еще возвращался как неопределенный. –

0

попробовать это

показать

document.getElementById('k3').style.visibility='visible'; 

скрыть

document.getElementById('k3').style.display='none'; 

см this для лучшей идеи

+0

Спасибо за совет, но результат тот же. –

+0

Я дал вам ссылку в своем посте, просто пройдите через это и реализуйте в своем коде – Anuj

+0

Еще раз спасибо Anuj, но я до сих пор не понимаю. –

0
  1. Добавить свойство видимости в IMG тег. visibility = "visible"

2. Также проверьте видимость со следующим.

document.getElementById (ImageID) .style.visibility == "видимый"

  1. Использование же в hideImage и функции ShowImage.
+0

Спасибо, Nales - тот же результат. –