2016-04-04 22 views
-2

Bu, tarayıcımda denemek istediğim küçük bir egzersiz W3Schools'tur. Dosyaları ayrı ayrı ayarladığımda geçiş animasyonu çalışmadı, ancak betiği HTML içine koyduğumda çalıştı. Dosyaları ayrı olduklarında yanlış mı bağlarım? Komut dosyasını <head> etiketleri arasına yerleştirmeyi de denedim ve bu da işe yaramadı. HTML:Bu HTML ve JavaScript dosyasını doğru şekilde bağladım mı?

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet"type="text/css"href="main.css"/> 
    </head> 
    <body> 
     <div class="container" onclick="myFunction(x)"> 
      <div class="bar1"></div> 
      <div class="bar2"></div> 
      <div class="bar3"></div> 
     </div> 
    <script type="text/javascript"src="script.js"></script> 
</body> 
</html> 

JS:

function myFunction(x){ 
    x.classList.toggle("change") 
} 

teşekkür ederiz!

+4

sizin JS işlevi kullanılabilir olmasını:

<div class="container" onclick="myFunction(x)"> 

Belki böyle bir şey yapmaya çalışıyorsun:

Ayrıca aşağıdaki satırı x için bir bağlam yok olduğunu fark HTML’de, önce onu tanımlamanız gerekir. Örneğin. 'script' etiketinizi' head' bölümüne yerleştirin. Bir yan notta, HTML kodunu doğrudan HTML kodunda kullanmak genellikle kötü bir uygulamadır, çünkü daha büyük bir kod üzerinde devam etmek zorlaşır ve bu tür hatalara yol açabilir. W3C burada, çünkü onlar sadece küçük demolar oldukları için, onları mümkün olduğunca kısa ve basit hale getiriyorlar. – blex

+0

@blex Önemli değil, özniteliklerde JS hemen çalıştırılmaz. –

+0

@Hawkeye jQuery geçişini değil, yerel ['classList'] (https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)' toggle' yöntemini kullanıyorlar. –

cevap

1

Eğer HTML dosyası ile aynı klasörde "script.js" olarak JavaScript dosyasını kaydettiğiniz EĞER

<script type="text/javascript"src="script.js"></script> 

yeterli olacaktır etiketi. İsterseniz

<div class="container" onclick="myFunction(this)"> 
İlgili konular