We Keep Coding

I cant change text using javascript?

Im working on a simple commenting system for a website using the postmail API. The thing is that i want to give the user a better error when something goes wrong because postmail only changes the URL. For this is i check the URL of the page when the page loads and if that contains an error i want to change a element to that error. The only problem is that detecting it works fine and i can also create a alert with the error but the text wont change... Can anyone help me with this?
js:
<script>
function sending(){
document.getElementById("submit_form").value = 'Sending...';
};
if (window.location.href.indexOf("err") != -1){
alert("An error occured! Please make sure to check your input fields."); //this works fine
document.getElementById("ertext").innerHTML = 'Error!'; //this doesnt
};
</script>
HTML:
<form action="https://postmail.invotes.com/send"
method="post" id="email_form">
<h2>Feedback</h2>
<h4>Your Email:</h4>
<input type="text" name="subject" placeholder="aa#aa.aa" style="width: 80%;"/><br>
<h6>Your Message:</h6>
<textarea name="text" placeholder="Give some feedback" style="resize: none; width: 80%;"></textarea>
<input type="hidden" name="access_token" value="--" />
<input type="hidden" name="success_url" value="./comments.html" />
<input type="hidden" name="error_url" value="./comments.html?err=1" /><br><br>
<input id="submit_form" type="submit" value="Send" onclick="sending();" />
</form>
<p id="ertext"></p>
<br> <br>```

The Javascript code needs to be executed after the html document is loaded. As mentioned before you can achieve this by putting the script tag somewhere below all referenced elements in your DOM.
Another possibility is to put your JavaScript into a separate file "test.js" and then include it in the head of your document:
<script type="text/javascript" src="test.js" defer></script>
Using the defer attribute makes sure the script will be executed after the page finished parsing.

It depends on where you put the script. If you put it before the DOM element, document.getElementById("ertext") wouldn't find the element.
<script>
// before the DOM element
// Below line would raise TypeError: Cannot set property 'innerHTML' of null
document.getElementById('ertext').innerHTML = location.href;
</script>
<h1 id="ertext">the element</h1>
<script>
// after the DOM element
// You'd see `the element after` which indicates
// the script that is after the DOM element can find the element.
document.getElementById('ertext').innerHTML += ' after';
</script>

Javascript inside an html attribute

I have a pretty simple query here. I have a view page with an div and a form element. This is how they look.
<div id="candy" value="valueOfCandy" ></div>
<input type="text" value="javascript:document.getElementById('candy').getAttribute('value')"/>
I need to access the value of candy inside input's attribute (it can be any attribute).
I tried the code as I have shown above but that didnt work. I researched on StackOverflow too but couldnt find anything satisfactory. Please help out.
Edit: Thank you everyone. I found the answer to that, which I am gonna mark. Also, deleting this question so that it doesnt confuse someone else.

If I assume you want to do this at page load, do it like this
Note 1, custom attributes should have a data- prefix and use .dataset to access its value.
Note 2, for older browsers like IE10 and below, you need getAttribute (as in 2nd sample below).
Stack snippet 1
<div id="candy" data-value="valueOfCandy"></div>
<input id="candy2" type="text" value="" />
<script>
document.getElementById('candy2').value =
document.getElementById('candy').dataset.value
</script>
Stack snippet 2
<div id="candy" data-value="valueOfCandy"></div>
<input id="candy2" type="text" value="" />
<script>
document.getElementById('candy2').value =
document.getElementById('candy').getAttribute('data-value')
</script>

Do it in JavaScript outside of code but after the objects exist.
Here's an example of how to achieve this:
var candy = document.getElementById('candy').getAttribute('data-value');
document.getElementById('input').value = candy;
<div id="candy" data-value="valueOfCandy" ></div>
<input id="input" type="text"/>
As mentioned in the comments, please make sure your JavaScript code is loaded after your markup. There are various ways to do this, including waiting for the dom to load.
See $(document).ready equivalent without jQuery and How does the location of a script tag in a page affect a JavaScript function that is defined in it? for more information.

Try this
document.getElementById('input').value = document.getElementById('candy').dataset.value
<div id="candy" data-value="valueOfCandy" ></div>
<input id="input" type="text" value=""/>

This is not how you should be doing this.
JavaScript should be separated out of the HTML completely to avoid a whole host of issues. Including JavaScript in the HTML as you are attempting is a 20+ year old technique that was used before we had standards.
Next, a div element can't have a value attribute. value is only for form fields. But, you can create a data-* attribute, which allows for you to create custom attributes. You can then extract that value using the .dataset property.
See below:
// This code would be placed inside of <script> and </script> tags and the whole
// thing would be placed just before the closing body tag (</body>).
document.getElementById("result").value = document.getElementById('candy').dataset.value;
<div id="candy" data-value="valueOfCandy"></div>
<input type="text" id="result">

Put that code either within a script tag or in a separated js file.
Further, always bind the event DOMContentLoaded when you need to manipulate DOM elements.
DOMContentLoaded
The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. A very different event load should be used only to detect a fully-loaded page. It is an incredibly popular mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.
This way, your logic is totally consistent.
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
document.getElementById('candy2').value =
document.getElementById('candy').getAttribute('value')
});
<div id="candy" value="valueOfCandy"></div>
<input id="candy2" type="text" value="" />
A recommendation is to use data-attributes because the value attribute is related to form fields:
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
document.getElementById('candy2').value =
document.getElementById('candy').dataset.value;
});
<div id="candy" data-value="valueOfCandy"></div>
<input id="candy2" type="text" value="" />

JQuery not working on submit button

I am trying to learn some JQuery. I am using an external js to write my code in. It works fine when I call the 2 paragraph functions, but when I call the submit button it just load the page again.
My code looks like this:
<html>
<body>
<p id="paragraf">This is an internal paragraf</p>
Another Example:
<p id="paragraftest">This is the external js script</p>
<form>
<input type="text" name="Submit_test">
<button id="buttontest">Submit</button>
</form>
<script type="text/javascript" src="jqueryScript/jquery.js"></script>
<script type="text/javascript" src="jqueryScript/hide.js"></script>
</body>
</html>
Javascript:
$('#paragraf').click(function() {
$('#paragraf').hide();
});
$('#paragraftest').click(function() {
$('#paragraftest').hide();
});
$('buttontest').submit(function() {
alert("test");
});
/* I have tried with "" and '' in buttontest and test, but still the same */
I have also tried with this, but it is still the same.
<form>
<input type="text" name="buttontest">
<input type="submit" value="">
</form>
Can anybody see why nothing happens?
Best Regards
Mads

Missing id selector - buttontest is the id of the button so you need to use id-selector to select it(prefix with #)
$('#buttontest').submit(function() {
alert("test");
});

Correct this syntax:
$('input[name=buttontest]').submit(function() {
alert("test");
});
Using a unique ID for the button:
$('input#button_id').submit(function() {
alert("test");
});

You should select the button with the following way:
$('#buttontest')
You hadn't used the #, which is required when we are selecting elements form the DOM using their ids. For sure it was a writing error, since you use this correctly on your other selections.

Submit event is a form event, and you are trying to bind it to a button.
$('form').submit(function() {
alert("test");
});
In generally if you want to submit a form you should use dedicated onsubmit form event, not click event on any button.

It works with this code now:
<form id="form">
<input type="text" name="buttontest">
<input type="submit" value="submit">
</form>
<form id="form_1">
<input type="text" name="buttontest">
<input type="submit" value="submit">
</form>
Javascript:
$('#form').submit(function() {
alert("test");
});
$('#form_1').submit(function() {
alert("test");
});

Hiding input doesnt work

<input type="checkbox" name="AvatarfileSelected" value="image"
id="AvatarfileSelected" onclick="$('#extra').hide('slow')"/>
<span style="color:#538f05;">Change Image</span>
<div id="extra">
<input type="file" name="avatarfile" id="avatarfile"></input>
</div>
The above code doesn't work. Could someone show me the mistakes?

You probably didn't include jQuery...
Use vanilla javascript:
onclick="document.getElementById('extra').style.display = 'none'";
Instead of:
onclick="$('#extra').hide('slow')"
(Or include jQuery if you want to use it.)
BTW, <input> doesn't have a closing tag: </input>
Replace:
<input type="file" name="avatarfile" id="avatarfile"></input>
With:
<input type="file" name="avatarfile" id="avatarfile" />

Take out the onclick event from the HTML markup and do it in unobutrusive way. Make sure you bind your event functionalities in document ready event.
Use it like this
$(function(){
$("#AvatarfileSelected").click(function(){
$("#extra").hide();
});
});​
Jsfiddle sample : http://jsfiddle.net/p9tdf/1/

Two onClick actions one button

Does someone know a wizards trick to make it work ?
<input type="button" value="Dont show this again! " onClick="fbLikeDump();" onclick="WriteCookie();" />
PS: I am using it in a .js file.

Additional attributes (in this case, the second onClick) will be ignored. So, instead of onclick calling both fbLikeDump(); and WriteCookie();, it will only call fbLikeDump();. To fix, simply define a single onclick attribute and call both functions within it:
<input type="button" value="Don't show this again! " onclick="fbLikeDump();WriteCookie();" />

Try it:
<input type="button" value="Dont show this again! " onClick="fbLikeDump();WriteCookie();" />
Or also
<script>
function clickEvent(){
fbLikeDump();
WriteCookie();
}
</script>
<input type="button" value="Dont show this again! " onClick="clickEvent();" />

<input type="button" value="..." onClick="fbLikeDump(); WriteCookie();" />

Give your button an id something like this:
<input id="mybutton" type="button" value="Dont show this again! " />
Then use jquery (to make this unobtrusive) and attach click action like so:
$(document).ready(function (){
$('#mybutton').click(function (){
fbLikeDump();
WriteCookie();
});
});
(this part should be in your .js file too)
I should have mentioned that you will need the jquery libraries on your page, so right before your closing body tag add these:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://PATHTOYOURJSFILE"></script>
The reason to add just before body closing tag is for performance of perceived page loading times