innerHTML

[twenty]

Jag är ny på det här med javascript och har försökt mig på innerHTML, men det går inte så bra hehe. Har läst lite på internet och än så länge så ser min kod ut såhär, men den fungerar inte. Var har jag gjort för fel?

<ul id="meny">
  <li><p class="title">Title 1</p>
    <ul>
      <li>
        <p id="subtitle1"></p>
      </li>
    </ul>
  </li>
</ul>

function titles()
{
  var nextElement = next(this);
  if(nextElement.style.display == "none")
  {
    nextElement.style.display = "block";
  }
  else
  {
    nextElement.style.display = "none"; 
  }
}

function init()
{

  var title = document.getElementsByTagName("p");
  for(var i = 0; i < title.length; i++)
  { 
    if(title[i].className == "title")
    {
      title[i].onclick = titles;
    }  
  }
 
  var subtitle = document.getElementsByTagName("p");
  var show = document.getElementByClass('subtitle1');
  
  var subtitle1 = document.getElementsByTagName("p");
  for(var i = 0; i <subtitle1.length; i++)
  { 
    if(subtitle1[i].Id == "subtitle1")
    {
      show.innerHTML = "Detta är min text";    
      subtitle1[i].parentNode.getElementsByTagName("p")[0].style.display = 'none';
    } 
  }
   
} 

[voigtann1]

när kör du init metoden? Vad är det som inte fungera?

document.getElementByClass('subtitle1');

du menar nog getElementById

[drew]

Eller getElementsByClassName

[voigtann1]

Eller getElementsByClassName

Förutom att html koden är det ett ID och stödet för det är ju inte det mest optimala (ie9+)

Sen saknar man funktionen next vad gör den?

[plekanec]

Har du kollat något på jquery? Mycket snyggare och enklare imo.

[drew]

Förutom att html koden är det ett ID och stödet för det är ju inte det mest optimala (ie9+)

Ok, sorry missade den detaljen.

[twenty]

Förutom att html koden är det ett ID och stödet för det är ju inte det mest optimala (ie9+)

Sen saknar man funktionen next vad gör den?

Oj haha, Id ska det såklart vara! Men det fungerar inte ändå.
När jag klickar på "Titel 1" så visas min underrubrik, men min text show.innerHTML = "Detta är min text"; syns inte. Har jag skrivit koden fel eller kanske lagt koden på fel ställe?

Kanske lättare att se vad som är fel om jag skriver hela min kod!

function titles() 
{ 
  var nextElement = next(this); 
  if(nextElement.style.display == "none") 
  { 
    nextElement.style.display = "block"; 
  } 
  else 
  { 
    nextElement.style.display = "none";  
  } 
} 

function init() 
{ 

  var title = document.getElementsByTagName("p"); 
  for(var i = 0; i < title.length; i++) 
  {  
    if(title[i].className == "title") 
    { 
      title[i].onclick = titles; 
    }   
  } 
  
  var subtitle = document.getElementsByTagName("p"); 
  var show = document.getElementById('subtitle1'); 
   
  var subtitle1 = document.getElementsByTagName("p"); 
  for(var i = 0; i <subtitle1.length; i++) 
  {  
    if(subtitle1[i].Id == "subtitle1") 
    { 
      show.innerHTML = "Detta är min text";     
      subtitle1[i].parentNode.getElementsByTagName("p")[0].style.display = 'none'; 
    }  
  } 
    
}  

window.onload = init;


function next(elem) 
{
    do 
    {
        elem = elem.nextSibling;
    } 
    while (elem && elem.nodeType != 1);
    return elem;               
} 

[twenty]

Har du kollat något på jquery? Mycket snyggare och enklare imo.

Ja det har jag, men lyckades inte få det till att fungera som jag ville.

[voigtann1]

din Kod säger att nextsibling dvs det bli din ul lista som skall visas och döljas, men du säger i din andra kod att det är paragraf (#subtitle1) är den som skall döljas.

jQuery är betydligt enklare om du är mer van med CSS

Ja det har jag, men lyckades inte få det till att fungera som jag ville.

Och ren Javascript har fungerat bättre?

[voigtann1]

Oj haha, Id ska det såklart vara! Men det fungerar inte ändå.
När jag klickar på "Titel 1" så visas min underrubrik, men min text show.innerHTML = "Detta är min text"; syns inte. Har jag skrivit koden fel eller kanske lagt koden på fel ställe?

det gör den men du säger också att p elementet skall döljas, det du vill göra är något i stil med: http://jsfiddle.net/4vjP4/1/ gissar jag (och jQuery version: http://jsfiddle.net/4vjP4/2/ )