We Keep Coding

page does not change from javascript

I am working on a website using Jekyll through github-pages. I am working on some simple javascripts to make a random number generator, but they aren't able to change values on the page.
The page has the following:
/resume/index.html
<form>
<input type="text" name="#d" maxlength="3" value="1" />
<div class="dice_text">d</div>
<input type="text" name="d#" maxlength="2" value="4" />
<button type="button" name="rollme" onclick="roll()">roll</button>
<div class="dice_text"> : </div>
<input type="text" id="dieresult" readonly />
</form>
/resume/roll.js
document.getElementById('dieresult').setAttribute('value', '3') ;
function roll() {
alert("rolled!");
}
For some reason I don't understand, the roll() function will get called and give an alert when you press the button, so the site seems to be incorporating the javascript file, but it refuses to alter the page to display a number in the read only field.
My repo is online at github, and the problem site url is here.
EDITED: corrected 'id' vs 'name' issue but page still won't change the value of 'dieresult'

You're mistaking the name attribute with the id attribute
When you attempt to grab that element using document.getElementById, it will return null.
Making the id dieresult should fix this. I highly suggest getting cozy with your browser's inbuilt JavaScript console - you pick up on minor mistakes like this very quickly!

Your <input type="text" name="dieresult" readonly /> does not have an ID, which is what you are looking for in the line document.getElementById('dieresult').setAttribute('value', '3') ;
If you change the <input type="text" name="dieresult" readonly /> to <input type="text" id="dieresult" readonly /> and place this in the roll() function it should work just fine

your input has a name but you query it by id, change it to this:
<input type="text" name="dieresult" id="dieresult" readonly />

You have a 404 on jquery. Fix this by putting a jquery in your roll folder.
And, you can try to execute you code once everybody is onboard
$( document ).ready(function() {
document.getElementById('dieresult').setAttribute('value', '3') ;
});
See http://learn.jquery.com/about-jquery/how-jquery-works/#launching-code-on-document-ready

How to create auto-input script based on agularJS?

I´m trying to implement a greaskemonkey script to make an auto-input, but I cannot find a way to do it.
What I have:
HTML form:
<form ng-submit="buy(quantity2)">
<input name="quantity" type="text" ng-model="my.quantity" style="width:30px" maxlength="2">
</form>
I simply don´t know how to input a value for the box, usually I would do
$("input[name='quantity']:first").val("1");
Unfortunately val doesn´t exists here. Need a help, thanks!

For your better understand i just give you a example how you can take your value.
HTML form:
<form ng-submit="buy(youravlue)">
<input name="quantity" id="quantity" type="text" ng-model="youravlue" style="width:30px" maxlength="2">
</form>
using ng-submit you can take your value this way.
$scope.buy=function(data){
console.log(data);
}
using ID you can take your value this way.
angular.element("#quantity").val();

In angularjs we have to find the element either by id or querySelector or querySelectorAll and wrap it over angular.element which will provide jqlite(lighter version of jquery)
Refer this https://docs.angularjs.org/api/ng/function/angular.element
angular.element(document.querySelector("input[name='quantity']")).val("1");

Is there a better way to "link" text inputs?

I want to have the input boxes linked so that when you type something in one, it shows up in the other (and vice versa). Here's a "codepen" that shows how I'm doing it currently.
http://codepen.io/anon/pen/yEAbk/
It's pretty simple, but I feel like there should be an easier way to accomplish this. There is also a problem with this method that I illustrated in the codepen. You'll notice the button that fills one of the boxes with a string. Even though the content has been changed, the "onchange" event doesn't run, and so the other input box is not updated.
Is there an easier way to do this that will fix the problems I've been having?

This is exactly the kind of problem databinding is meant to solve. There are lots of libraries out there, but the most popular currently is AngularJS (by google). http://angularjs.org/
See demo: http://jsfiddle.net/34ZCs/2/ both inputs are bound to variable yourName:
<div ng-app>
<div>
<input type="text" ng-model="yourName" placeholder="A">
<input type="text" ng-model="yourName" placeholder="B">
</div>
</div>

Use "onkeyup" instead of "onchange". Then the next textbox will be updated instantly.
Do something like this
<input type="text" name="a" id="a" onkeyup="fillBoth('a','b')" onfocus="fillBoth('a','b')" />
<input type="text" name="b" id="b" onkeyup="fillBoth('b','a')"
onfocus="fillBoth('a','b')"/>
<button type="button" id="clicky" onclick="fillWithX()">click here for xxx</button>
And you JavaScript should be updated like this.
function fillWithX() {
document.getElementById('a').value = 'xxx';
document.getElementById('a').focus();
}

Slight change in your event handler might do the trick. Take a look: http://codepen.io/anon/pen/budnp/
<input type="text" name="a" id="a" onchange="fillBoth('b', 'a');" />
<input type="text" name="b" id="b" onchange="fillBoth('a', 'b');" />
<button type="button" id="clicky" onclick="fillWithX()">click here for xxx</button>
and the script:
function fillBoth(copyTo, copyFrom) {
document.getElementById(copyTo).value = document.getElementById(copyFrom).value;
}

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/

javascript input focus

<form id="commentform" method="post" action="wp-comments-post.php">
<input type="text" aria-required="true" tabindex="1" size="22" value=""
id="author" name="author">
</form>
I set default value "visitor" to the input box. When focus is in text box or mouose enters it, I want to hide "visitor" string and want to show it when it loses focus or mose moves out.

Try using the HTML5 placeholder attribute:
<input type="text" aria-required="true" tabindex="1" size="22"
placeholder="visitor" id="author" name="author">
While browser support is not 100% there yet, this will give you a standard way to achieve what you're trying to achieve, without going through unnecessary hoops.
Another thing you can try is to overlay the input element over some text and make it transparent/translucent when not in focus and opaque when in focus/filled.
As of today, Tumblr's login page uses this trick:
<div class="input_wrapper" id="">
<label for="user_password">Password</label>
<input type="password" id="user_password" name="user[password]" data-validation-type="password" value="">
</div>
Through CSS magic this becomes:

Looks like you are using WordPress, so you have the jQuery library on your site.
You can use my jQuery plugin to achieve this.
Example
jQuery
$('#author').inputLabel({
customLabel: 'Visitor'
});
In this case, I had to specify the label myself, but the plugin works without this by finding the relevant label element to the input, which should be present for accessibility.
jsFiddle.

If you are up to HTML 5 yet then try this:
<script type="text/javascript">
var prompt="visitor";
var txt=document.getElementById("author");
txt.onfocus=function(){txt.value='';}
txt.onblur=function(){
if(txt.value==''){
txt.value=prompt;
}
}
</script>

Ates Goral's answer looks very interesting. please try it first shot. this is an alternative if you do not want to sweat..:)
i would suggest using a watermark plugin. there are many available.
have used this plugin before. worked fine. gives you nice control.
the plugin requires jQuery

Though I too would use jQuery or CSS and a pseudo-class (:focus)....
Here's an easy JS solution that does exactly what you're after. Again, I wouldn't recommend this approach for more than one or two input fields.
<input type="text" value="Visitor" onFocus="this.value='';" onBlur="this.value='Visitor';" id="author"/>