Develop Reference

Getting the parent element from the location of the called function

Is possible to getting parent element from the location of the called function?
my case:
<div class="alphabet">
<div class="lorem">
<script type="text/javascript">
getParent();
</script>
</div>
<div class="ipsum">
<script type="text/javascript">
getParent();
</script>
</div>
<div class="dolor">
<div class="amet">
<script type="text/javascript">
getParent();
</script>
</div>
</div>
</div>
<script>
function getParent(){
//......????????.......//
}
</script>
Expected Result (Console Log):
getParent() > the parent is lorem
getParent() > the parent is ipsum
getParent() > the parent is amet

This should work, although my intuition tells me you're doing something wrong.
<script>
function getParent(){
var me = document.currentScript;
var parent = me.parentElement;
console.log(parent.className);
return parent;
}
</script>
<div class="lorem">
<script type="text/javascript">
getParent();
</script>
</div>
<div class="ipsum">
<script type="text/javascript">
getParent();
</script>
</div>
https://jsfiddle.net/8tjsa8fw/

Jquery toggle() not working on YouTube subscription button

Want to create a DIV which toggle when I click on youtube subscription button. Also, I want to hide the Youtube button.
This seems easy, but Jquery toggle method is not working on youtube sub button.
CODE ↓
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e){
//Your code here
$('#xx2').click(){
$('#cc').toggle();
}
});
</script>
<div id="cc" style="display:none;" >
<h1>this is a hidden item</h1>
</div>
<script src="https://apis.google.com/js/platform.js"></script>
<div id="btn">
<div id="xx2" class="g-ytsubscribe"
data-channelid="UCwevqbHI8ppBSvVKESoLpPQ"
data-layout="full" data-count="default" ></div>
</div>
See this photograph :

Please close the script tag and provide some text inside the xx2 div.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e){
$('#xx2').click(function(e){
$('#cc').toggle();
});
});
</script>
<div id="cc" style="display:none;">
<h1>this is a hidden item</h1>
</div>
<script src="https://apis.google.com/js/platform.js"></script>
<div id="btn">
<div id="xx2" class="g-ytsubscribe"
data-channelid="UCwevqbHI8ppBSvVKESoLpPQ"
data-layout="full" data-count="default" >text</div>
</div>

Syntax error
Change $(document) instead of $("document")
And click function declaration was wrong. initiate the click function of xx2 and the toggle inside the click function
$(document).ready(function(e) {
$('#xx2').click(function() {
$('#cc').toggle();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="cc" style="display:none;">
<h1>this is a hidden item</h1>
</div>
<div id="btn">
<div id="xx2" class="g-ytsubscribe" data-channelid="UCwevqbHI8ppBSvVKESoLpPQ" data-layout="full" data-count="default">xx</div>
</div>

there is error in the syntax of jquery, use following cod:
<script type="text/javascript">
$(document).ready(function(e){
$('#xx2').click(function(){
$('#cc').toggle();
});
});
</script>

Maybe the classic way will work:
HTML:
<div id="cc">
<h1>this is a hidden item</h1>
</div>
<div id="btn">
<div id="xx2" class="g-ytsubscribe"
data-channelid="UCwevqbHI8ppBSvVKESoLpPQ"
data-layout="full" data-count="default">
xxx <!-- The xxx is used for better hitting -->
</div>
</div>
I removed the style attribute from #cc.
Added following CSS:
div.cc {display:none;}
Javascript:
$(document).ready(function(){
$('#xx2').click(function() {
$('#cc').toggleClass("cc");
});
});
So far I understand your problem right, this did work according Jsfiddle.net .

Correct usage of .innerHTML

Trying to add content into individual div-containers I stumbled on the command .innerHTML, which I tried to implement accordingly. Strangely I get the following error:
*Uncaught TypeError: Cannot read property 'innerHTML' of null *
I'm running the code over my local Apache server if that makes any difference.
index.html
<html>
<head>
<title>Welcome</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header">
<h1>Startseite</h1>
</div>
<div id="container">
<div id="left">
Navigation
</div>
<div id="content"></div>
<div id="right"></div>
<div class="clr"></div>
</div>
</body>
</html>
javascript.js
var navidiv = document.getElementById('left');
navidiv.innerHTML += "FirstElement";

Put it in window.onload
window.onload = function()
var navidiv = document.getElementById('left');
navidiv.innerHTML += "FirstElement";
}
The element has to be present in the DOM, before you can access it in JS

You have to ensure that your DOM elements have loaded before accessing them with javascript.
Since you are using jquery, your javascript can simply be
$(function() {
var $navidiv = $('#left');
$navidiv.html($navidiv.html() + 'FirstElement');
});

try this
html
<div id="header">
<h1>Startseite</h1>
</div>
<div id="container">
<div id="left">
Navigation
</div>
<div id="content"></div>
<div id="right"></div>
<div class="clr"></div>
</div>
javascript.js
$( document ).ready(function() {
var navdiv=$("#left").html();
$("#left").html(navdiv+"FirstElement");
});
see DEMO

Javascript only does only work on some places on the page

I added the javascript code directly into the html, so you are able to see what I am doing wrong.
The alert only works on the img in the div class='sandbar-one' nowhere else.
The html ouptut looks like this:
<html>
<head> … </head>
<body>
<div class="header">
<div class="sandbar">
<a style="display:block" href="/">
<div class="sandbar-logo">
<div class="sandbar-one">
<img width="300" src="/assets/123456.png" alt="123456"></img>
</div>
</div>
</a>
<div class="sandbar-left"> …
</div>
</div
<div class="navbar navbar-inverse navbar-fixed-top"> … </div>
</div>
<div class="content" data-target="#sidenavbar" data-spy="scroll">
<div class="container-fluid">
<div class="row-fluid">
<div class="span3"> … </div>
<div class="span9">
<script>
$("img").hover(function() {
alert("Hello World!");
},function() {
})
</script>
<img src="/assets/123456.png" alt="123456"></img>
...
the haml file:
:javascript
$("img").hover(function() {
alert("Hello World!");
},function() {
});
= image_tag("/assets/123456.png")
I tested in Firefox and Safari. The web-console shows no errors.

This looks to be because when the javascript is executed, only that one img is loaded in the doc. Try executing the JS on page load instead
$(function(){
$("img").hover(function() {
alert("Hello World!");
},function() {
});
});

What's wrong with this handlebars.js code?

I have an index.html where I have this code: I followed it from the documentation on handlebars site, but I am not able to make it work. When I pass a string to var source then it works fine, but when I try to get the template using $(#elem_id), handlebars does not insert the data in it.
<html>
<head>
<script src="../static/js/handlebars-1.0.0.beta.6.js"></script>
<script src="../static/jquery/1.7.1/jquery.js"></script>
</head>
<body>
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
<script type="text/javascript">
$(document).ready(function() {
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var d = {"title": "My New Post", "body": "This is my first post!"};
var result = template(d);
console.log(result); //This just returns the template html, without the data
});
</script>
</body>
</html>

I assume this is caused by your HTML being in script tags. Try wrapping your Html inside an invisible div (or make the div itself invisible), i.e.:
<div style='display:none;' id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</div>