Develop Reference

Why does .setAttribute not work when nested inside a function?

I'll make it quick. I researched a lot but I'm not sure why this is not working.
I have a textarea tag which I want to set to 'data-something' tag using setAttribute("data-something","") command and it works just fine if I just list it out there. However what I'm doing is I"m creating a button that when clicked sets the attribute of the textarea to 'data-something', and no matter what it fails to operate when I nest setAttribute inside a myFunction and set button onclick="myFunction()". I'd appreciate if someone could explain a workaround that.
Thanks a ton for your patience.
This is what works:
<textarea></textarea>
<script>
textarea.setAttribute("data-something","")
</script>
This is what doesn't work
<textarea></textarea>
<button onclick="myFunction()"></button>
<script>
function myFunction(){
textarea.setAttribute("data-something","")
}
</script>

You have to give you element a handle getElementById then make the change
function myFunction(){
let textarea = document.getElementById("Foo");
textarea.setAttribute("data-something","This is the set Data");
console.log(textarea);
}
<textarea id="Foo"></textarea>
<button onclick="myFunction()">Click me</button>

Link to a HTML page inside a Javascript function

I want to link to a HTML file from a JavaScript on-click function. For that I used following function.
onClick: function () {
document.link("about.html");
}
But this is not working. So how can I add link inside of onClick function. Can anyone help me.

Usually I use this code:
<input type="button" value="Go to page" onclick="location.href='mypage.html'"/>
Anyway u can try:
onClick: function () {
location.href("about.html");
}

You can use the onclick property of a button element in HTML that will trigger a function when the button is pressed.
<button onclick="myFunc()">click me</button>
In your JavaScript file, you can then create the myFunc() function that will be called and executed soon after.
function myFunc() {
window.location = "otherpage.html";
}
According to W3C it's safer for cross-browser compatibility to use window.location rather than document.location.

onclick:function(){
window.navigate('your_url');
}

Try this:-
<input type="button" value="Go to page" onclick="openUrl()"/>
function openUrl() {
window.open("about.html");
//or
//window.location.href= "about.html";
}

Calling a function from a HTML button

I wonder what I am doing wrong in this case? I got this button which is an HTML element. When I click on it, I want the function push() to get activated. Unfortunally my console says:
ReferenceError: push is not defined
Can some one help me in this case? Thanks so much!
<button type="button" onclick=push()>Click Me!</button>
<script type="text/javascript">
function push (){.....};
</script>

You can change onclick=push() to onclick="push()" to make it work!
Also, there might be something wrong in the body of the push function because of which it is not able to compile - hence, the error.

You could do these instead :
You can do this if you want to use the function push() with only one button,
<button type="button" id="clickme">Click Me!</button>
<script type="text/javascript">
document.getElementById("clickme").addEventListener("click", function() {.....}
</script>
And this if you want to use the function push() with multiple button,
<button type="button" id="clickme">Click Me!</button>
<script type="text/javascript">
document.getElementsByClassName("clickme").addEventListener("click", function() {.....}
</script>
Pros : Less HTML
Cons : More javascript

Executing Commands Javascript

I want to execute a command by the click of a button, and not when the page loads.
function hey() {
alert('bla');
}
Do I add something to the code above or to the button?
<input type="button" value="Click Me" onclick="hey()" />

Have you taken the time to type in your question into the magical Google box yet? Surely you'll see something like this:
<input type="button" value="Click me, now" onclick="hey()" />

Say you have the function that alerts a window to the user.
<script type="text/javascript">
function showMe() {
alert('You clicked on the button');
}
</script>
<button onclick="showMe()">Button</button>
This will make sure that the function is only called when the button is clicked upon and not when the page is loaded.

Okay, so you have a code that should work for alerting something on the click of a button. But you state that the code is running on page load. You have to check you code, looking for:
An onload attribute on the body tag, something like <body onload="hey()">
A call to hey somewhere else on your js code. Look for hey().
Maybe a reference to the button followed by a call to .click()
There is something else on your code causing the function to be called, you'll have to scan your code to find out what it is.

alert message does not pop up

I have put the code on jsfiddle.net.
The problem I am having is that the function does not seem to get called when showToast button is clicked.
The actual code
<button type="button" onClick="showAndroidToast('Hello Android!')">Show Toast</button><br/>
function showAndroidToast(name){
alert("hi");
}
I got the error:
ReferenceError: Can't find variable: showAndroidToast;
Anyone help? Thanks!

The problem is that it is not onClick but onclick, and your function should be declared in some cases like this:
<script>
window.showAndroidToast = function(){
//code
};
</script>
<button type="button" onclick="window.showAndroidToast('Hello Android!')">
Show Toast
</button>
This is just to be found globally, just to be sure it is not a problem with the browser itself.

Remove type from your button tag:
<button onClick="showAndroidToast('Hello Android!')">Show Toast</button><br/>
//and check
Hope it helps