Unable to change a value inside a variable? - javascript

I am currently working on a project that I took over with the input reads from a barcode, currently iam having trouble with my output giving me a fix value which the code reads from and does not read from the actual input.
below is the html code for the scanner. it reads fine
<div class="section" id="instruction-3">
<p>Otherwise, scan your code at the bottom, or manually type it in here:</p>
<span>
<input type="text" id="IC-input" name="IC" onclick="openKeyboard()" onkeyup="autofill(this.value)" placeholder="Enter your IC Number" required maxlength="9">
<label><button type="button" id="theButton" onclick="theButtonIsPressed()">Submit</button></label>
</span>
</div>
follow by the javascript (which i suspect is where the problem lies but am not sure)
<script>
var NRIC = '{"NRIC":"0"}';
function theButtonIsPressed(){
closeKeyboard();
console.log('button clicked');
NRIC = '{"NRIC":"123456789"}';
//var IcNum = document.getElementById("IC-input").value;
//NRIC = NRIC.replace("0", IcNum);
document.getElementById("IC-input").value = "";
doWork(NRIC)
}
</script>
function doWork(NRIC) {
// ajax the JSON to the server
$.post("receiver", NRIC, function(){
});
// stop link reloading the page
function update() {
setInterval(function(){$.post("receiver", '{"NRIC":NRIC}', function(){});}, 900);
It keeps giving me the value inside NRIC = '{"NRIC":"123456789"}'; which is 123456789, i realize this might be a simple fix but i am still learning and am unsure.
thank you in advance.

If I correctly understanded you want to have in the obj the input value, so try this:
function theButtonIsPressed(){
closeKeyboard();
console.log('button clicked');
var IcNum = document.getElementById("IC-input").value;
NRIC.NRIC = IcNum;
doWork(NRIC)
}

Why quotes around an object?
var NRIC = {"NRIC": 0};
function theButtonIsPressed() {
NRIC = {"NRIC": 123456789};
doWork(NRIC)
}

all but I have solved the problem, it was my fault that I did not mention I wanted to transfer the data to another webpage, and the problem with that was that the data was not transferred over to the other html.
function autofill(value){
console.log("Autofill:"+value)
//console.log(9 digits);
button = document.getElementById("theButton");
if(value.length == 9){
console.log('form is ready to submit');
theButtonIsPressed(value);
}
}
function theButtonIsPressed(value){
closeKeyboard();
console.log('button clicked');
//NRIC = '{"NRIC":"123456789"}';
console.log(value)
doWork(value)
}
by doing this it read the value as accordingly from the input and worked after, sorry again for my confusing question and thanks to everyone who tried to help.

Related

Button not clicking in HTML and JavaScript

My question is the following in JavaScipt and HTML:
let submit = document.getElementById("button");
let text = document.getElementById("inputForm");
submit.addEventListener('сlick', function () {
let textValue = text.value;
console.log("The input is " + textValue)
});
I am sure I connected the HTML to JS correctly via the script attribute.
<div class="input">
<h3 id="inputText">Ввод:</h3>
<input id="inputForm" />
<button id="button">Добавить</button>
</div>
Here is the part of the Code I want to work, but the Button has no effects. Initially I was putting a lot of fonts on a button and input field in css, but then I deleted them and it still doesn't work. By work I mean to print the input of the input field to the console.
I don't know what it was, but you had some weird character in there I think... all I did was removing the click and the bracket from the AddEventListener function and rewrite it. Strange, I have to admit. Just textValue.Value is wrong it needs to be lowercase textValue.value otherwise it was completely fine.
For all reading, this create a snippet and try run with textValue.value this was not the mistake. The event listener wasn't set up somehow.
let submit = document.getElementById("button");
let text = document.getElementById("inputForm");
submit.addEventListener("click", function () {
let textValue = text.value;
console.log("The input is " + textValue)
});
<div class="input">
<h3 id="inputText">Ввод:</h3>
<input id="inputForm" />
<button id="button">Добавить</button>
</div>
Edit: so I couldn't leave this open, because many of you and myself were confused by which char could it be. I analyzed it in Notepad++ and wanted to see all chars but there was no invisible char like CR or LF. My next thought was the encoding because #vnikonov_63 was writing cyrillic chars inside his html. What I did was transform the code to Windows-1251 (https://de.wikipedia.org/wiki/Windows-1251) and there you can see the result...
submit.addEventListener('СЃlick', function () {
Everything is the same but not the c. I compared Windows-1251 (cyrillic) and Windows-1250 (https://de.wikipedia.org/wiki/Windows-1250 Middle European) Encodings and the c has the exact same Position. So all of this is just some encoding issue. Surely a cwhich is not really a c as javascript expects it, won't set up a eventlistener because javascript doesn't know a event called СЃlick. As I am not an expert with encodings i can't explain to you why the СЃ shows up as an c but i am pretty sure that was the problem.
I would work with the form tag. There is an event for submit when you click the submit button which is type of submit.
code:
document.querySelector("form").addEventListener("submit", (e) => {
var text = document.querySelector("#inputForm");
console.log(text.value);
});
<form action="javascript:void(0);">
<h3 id="inputText">Ввод:</h3>
<input id="inputForm" />
<button type="submit">Добавить</button>
</form>
The issue is with the Value property. It should be .value.
let submit = document.getElementById("button");
let text = document.getElementById("inputForm");
submit.addEventListener('click', function () {
let textValue = text.value;
console.log("The input is : " + textValue);
});

Javascript: I cant get a textbox to display a value updated on the client side

I'm trying to simply have a button update the contents of ah HTML textbox (on the client side).
Clicking the button fires the updateBox() method fine. Stepping through the code, I can see the text1.value field update fine but the text1 does not seem to get updated by changes to the dom.
Am I mistaken to think that you can do updates on the client side only by modifying dom data?
<input type=text name="text1" value="100"/>
<button name="but1" id="but1" onclick="updateBox" >clickme!</button>
<script type="text/javascript" >
var text1 = document.getElementsByName('text1');
function updateBox() {
//text1.value = "22"; <----tried this way, no good either :(
text1.innerHTML = "99";
}
</script>
Few things:
onclick="updateBox" should be onclick="updateBox()"
var text1 = document.getElementsByName('text1'); should be var text1 = document.getElementsByName('text1')[0]; (note the [0])
text1.value = "22"; is the one to use
jsFiddle example
Try use below,
var text1 = document.getElementsByName('text1')[0];
function updateBox() {
text1.value= "99";
}
Ref: https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByName
Thanks for everyone's responses.
With your advice I got the button to update. I appreciate the advice on how to implement the function correctly. This was just a test so I didn't pay much attention.
1) I had to use: onclick="updateBox" rather than "updateBox() in the button HTML because "updateBox" caused the event to fire with out clicking the button.
2) Big thanks for pointing out that I was referencing a collection instead of an item in the collection. Had to use: var tb1 = document.getElementsByName('tb1')[0];
3) For some reason the box would not update when I used:tb1.innerHTML = "99";
This worked: tb1.value = "99";
text1[0].innerHTML = "99"
Use innerHTML instead of value
try passing the variable to your function instead of declaring it outside of your function.
<input type=text name="text1" value="100"/>
<button name="but1" id="but1" onclick="updateBox('text1',99)" >clickme!</button>
<script type="text/javascript" >
function updateBox(t,v) {
var tv = document.getElementsByName(t)[0];
tv.value = v;
}
</script>

HTML local storage with button click

Trying to store a bunch of text boxes once filled and button clicked to local storage. I've looked around and have only found this which I'm trying except im getting Uncaught ReferenceError: save_data is not defined. Any insight would be appreciated.
<label for="serveri"> Server: </label> <input type='text' name="server" id="saveServer"/> <button onclick="save_data()" type="button" value="Save" id="Save">Save</button>
<script>
function saveData(){ var input = document.getElementById("saveServer");
localStorage.setItem("server", input.value);
var storedValue = localStorage.getItem("server"); } </script>
If the above doesnt show my problem heres the full in jsfiddle:http://jsfiddle.net/hhntg/
Edited your jsfiddle to make things work. You just need to run that function when the button is clicked. Tested and verified working with localstorage through the inspector.
http://jsfiddle.net/hhntg/1/
var save_button = document.getElementById('Save')
save_button.onclick = saveData;
function saveData(){
var input = document.getElementById("saveServer");
localStorage.setItem("server", input.value);
var storedValue = localStorage.getItem("server");
}
The only difference in the code here is that the function you wrote is attached to a click handler on the save element, you were nearly there : )
From my observations. You have the function name as saveData where as you used save_data for the button

How to get value from an input and pass it to a function?

I'm in the process of making little point-and-click game using html5 and jQuery. Even though I'm complete noob at these, up until now I didn't have any significant problems. But recently I've encountered problem I can't seem to tackle - I've tried to search answers online, but even when they seemed relevant, I couldn't fix it anyway. So here is the thing:
I'd like to make input where player could write answer to the riddle (and preferably submit it by pressing enter, but now I have button for testing purposes, as onclick seemed to me to be easier way to do it) and the answer would go to the function that would determine what dialogue would show next. But somehow whatever I do the input doesn't seem go into this function. Probably it's very basic error, but I can't spot it.
Here's code:
<div id="answera" data-actor="francois">
<input type="text" id='answer1'/>
<input type="button" value="Test" onclick="testRiddle('answer1', '2')" />
</div>
testRiddle function:
testRiddle: function(myfield, answer) {
var myData = document.getElementById("#location_partI1 ."+myfield).value;
if(myData!==''){
if(myData == answer){
game.dialogue.show($("#location_partI1 .answer1right"));
}else{
game.dialogue.show($("#location_partI1 .answer1wrong"));
}
}else{
game.dialogue.show($("#location_partI1 .lackofinput"));
}
},
Thanks for any help.
Looks like you need:
testRiddle: function(myfield, answer) {
var myData = document.getElementById(myfield).value;
if(myData!==''){
if(myData == answer){
game.dialogue.show($("#location_partI1 .answer1right"));//is answer1right a class or id???
}else{
game.dialogue.show($("#location_partI1 .answer1wrong"));//same here???
}
}else{
game.dialogue.show($("#location_partI1 .lackofinput"));//still the same here???
}
},
This:
var myData = document.getElementById("#location_partI1 ."+myfield).value;
should be this:
var myData = $("#location_partI1 ."+myfield).val();

Javascript Form Submit Failure

I have code on my website that isn't working, and I haven't been able to figure out why...
Here is the code:
if (self.location.href == top.location.href) {
document.fastform.submit();
document.getElementById(fastform).submit();
}
Now if I put something other than a form submit into the if statement, it works just fine. It's just when I do the form submit code it never works...
Here is the form code:
<form id="fastform" name="fastform" ACTION="/amember.php">
<INPUT TYPE="text" NAME="myurl" ID="myurl">
<input type="submit" />
</form>
Thanks for the help guys!
So far none of the suggestions work, I have tried several different variations like putting quotes around the fastform in getelementbyid. Here is my entire javascript program:
<script type="text/javascript">
function geturl() {
var locate = document.location
document.fastform.myurl.value = locate
}
window.onload = geturl;
if (self.location.href == top.location.href) {
var f=document.forms.fastform; f.submit();
}
</script>
Thanks for the suggestions!
Okay, so using some of the suggested code here I got it working. The problem was the if statement was not being executed at the right time, I moved things around so that the if statement was executed LAST and everything started working. Here is the complete (functioning) code:
<script type="text/javascript">
function geturl() {
var locate = document.location
document.fastform.myurl.value = locate
getmeoutofhere()
}
window.onload = geturl;
function getmeoutofhere() {
if (self.location.href == top.location.href) {
document.getElementById('fastform').submit();
}
}
</script>
<form id="fastform" name="fastform" ACTION="/amember.php" style="visibility:hidden;">
<INPUT TYPE="text" NAME="myurl" ID="myurl" />
<input type="submit" />
</form>
You can use this in your function:
var f=document.forms.fastform;
f.submit();
and it's working completely fine
document.getElementById('fastform').submit();
OR
var frm = document.getElementById('fastform');
frm.submit();
I'm not sure if it's the problem, but there's certainly one problem with the line:
document.getElementById(fastform).submit();
The problem, I think, is that you're trying to get an element by its id, but getElementById() requires a quoted string, unless you've already assigned the string to the variable represented by fastform. Therefore it should be either:
document.getElementById('fastform').submit();
or:
var fastform = 'fastform';
document.getElementById(fastform).submit();
Further, you seem to be trying to work with the fastform variable before it seems to have been set, in the first line contained within the if statement:
document.fastform.submit();
I'd suggest amending your script a little, to be something like:
if (self.location.href == top.location.href) {
var fastform = document.getElementById('fastform');
fastform.submit();
}
References:
document.getElementById().

Categories