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");

Input text box not recognising in IE8

I am working in a page created with the help of sharepoint .
In that page , we have one tag.
<input name="SearchBox" title="Search..." class="" id="" accessKey="S" onkeydown="" onkeypress="" onfocus="" onblur="" type="text" maxLength="2048" autocorrect="off" autocomplete="off" value="test"/>
something like the above
In IE9 and above , chrome I am fetching the value of the text box and I am passing that value to another function . It is working fine
But In IE8 , if i tried to fetch like document.getElementsByName('SearchBox')[0].value, it throwing error as "SCRIPT5007: Unable to get value of the property 'value': object is null or undefined "
I inspected the elements in developer tool of IE8. I am really surprised the input tag element is not able to inspect in IE8 . Then I opened the html in developer tool and I saw the element is missing in html file . But it is rendering in page. How come is it possible. Can anyone help me regarding this ?
We used sharepoint 2013.

Try this code:
You should allow the blocked content:
HTML:
<input name="SearchBox" title="Search..." class="" id="txt1" accessKey="S" onkeydown="" onkeypress="" onfocus="" onblur="" type="text" maxLength="2048" autocorrect="off" autocomplete="off" value="test"/>
JS:
$(document).ready(function(){
var val=$("#txt1").val();
alert(val);
});

Have you tried it with JQuery?
$("input[name='SearchBox']).val();

How to change a browsed page's <input>?

I'm jQuery beginner.
I'm trying to modify the source code of a page I'm browsing, using Firefox plus Greasemonkey.
How can I modify:
<input id="HiddenCategory" type="hidden" name="PageCategory"></input>
to:
<input id="HiddenCategory" type="text" name="PageCategory" value="OTHER"></input>
?

Something like this?
$("#HiddenCategory").attr("type", "text").val("OTHER");
This is untested but i think it should work ok.

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/