---
title: "innerHTML"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/191115-innerhtml"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "twenty"
published: "2013-01-31T18:42:08.000Z"
updated: "2013-02-01T10:10:51.000Z"
replies: 9
views: 969
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/191115-innerhtml"
---

# innerHTML

## #1 — twenty, 2013-01-31T18:42Z

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>
```

```php
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';
	} 
  }
   
}
```

Permalänk: https://www.webforum.nu/p/191115

## #2 — voigtann1, 2013-01-31T18:49Z

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

document.getElementByClass('subtitle1'); 

du menar nog getElementById

Permalänk: https://www.webforum.nu/p/2307655

## #3 — drew, 2013-01-31T23:28Z

Eller getElementsByClassName

Permalänk: https://www.webforum.nu/p/2307657

## #4 — voigtann1, 2013-02-01T05:24Z

> **[drew skrev:](https://www.webforum.nu/p/1558298)**
>
> 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?

Permalänk: https://www.webforum.nu/p/2307659

## #5 — plekanec, 2013-02-01T07:24Z

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

Permalänk: https://www.webforum.nu/p/2307660

## #6 — drew, 2013-02-01T08:20Z

> **[voigtann1 skrev:](https://www.webforum.nu/p/1558300)**
>
> 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.

Permalänk: https://www.webforum.nu/p/2307662

## #7 — twenty, 2013-02-01T09:56Z

> **[voigtann1 skrev:](https://www.webforum.nu/p/1558300)**
>
> 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! 

```php
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;               
}
```

Permalänk: https://www.webforum.nu/p/2307666

## #8 — twenty, 2013-02-01T10:05Z

> **[plekanec skrev:](https://www.webforum.nu/p/1558301)**
>
> 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.  :l

Permalänk: https://www.webforum.nu/p/2307667

## #9 — voigtann1, 2013-02-01T10:07Z

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? ;)

Permalänk: https://www.webforum.nu/p/2307668

## #10 — voigtann1, 2013-02-01T10:10Z

> **[twenty skrev:](https://www.webforum.nu/p/1558307)**
>
> 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/> )

Permalänk: https://www.webforum.nu/p/2307669

---

Tråden på webben: https://www.webforum.nu/amne/javascript/191115-innerhtml