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
Related
I've tried different solutions but they all seem to be not working.
It is breaking my autocomplete!
To setting
autocomplete=off
autocomplete=new-password
MDN reference
Placing the following script inside the HTML.
<script>
$(document).ready(function(){
$(':input').live('focus',function(){
$(this).attr('autocomplete', 'off');
});
});
</script>
Adding the following
readonly onfocus="this.removeAttribute('readonly');"
also is not working. Any other possible solutions would be helpful!
<form>
<span>Autocomplete-off</span> - <input class="grid--cell s-input" type="text" name="display-name" id="display-name" autocomplete="off"/>
</br> </br>
<span>Autocomplete-new-password</span> - <input class="grid--cell s-input" type="text" name="display-name" id="display-name" autocomplete="new-password"/>
</form>
To demonstrate this, run the above snippet, type something into the textbox, and hit the down arrow twice on Edge.
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");
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();
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;
}
I've created a search page that can be toggled between french and english. So when the user searches a record and toggles to french it displays the same record they were viewing on the english page.
What I want to do is display the record name in the search box when the page is toggled.I assumed it was as simple as doing a $('#inputID').val(record); but it doesn't seem to be working. I've alerted the record name and it works fine, so I'm stumped. All the scripts are linked correctly as well so that's not the problem.
Autocomplete Box Code
<div id="ui-widgit">
<label for="searchParams">
<h1>Search All Programs (By Screen Number or By Error Code):</h1>
</label>
<input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" />
<input type="button" value="Search" name="searchBtn" class="btn_Design" onclick="showSearch(inputID.value)"/>
</div>
Try to change the value of inputID with this
$('#inputID').val(recordToggle);
also have tried this:
$('#inputID input').val(recordToggle);
It is hard to tell with your presented markup but I am assuming you are trying to change the value of $('#inputID') after the page refreshed. It is important where you put this code. If it is placed before <input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" /> you will not return anything with $('#inputID') so you will change the value of nothing to your text. It will give no error. To fix this you can use:
$( document ).ready(function(){
$('#inputID').val(recordToggle);
});
Be sure to read about jQuery's ready function because load may be the better choice.
If this doesn't fix your problem let me know. I will update my answer.