I don't think it's an onload issue anymore since I used the window.onload function. Here is the relevant pieces of the code. The console is saying the capitals is undefined. I thought I was defining it when I declared the value.
Thanks in advance!
<form name="shares">
<table>
<tr><td>Enter information here:</td></tr>
<tr>
<td>Capital to Invest</td>
<td id="capitalr"><input type="text" name="capital" onchange="calculate();"> </td>
</tr>
</form>
JS
window.onload = function() {
document.getElementById("hello").innerHTML="Hello";
var capitals = document.getElementById("capitalr");
var x = capitals.id;
var pps = document.shares.price.value;
};
function calculate () {
console.log("Hey");
console.log(capitals);
};
You are defining the variable within a function scope, which makes it inaccessible from outside that function scope. Define it outside and it will work:
var capitals;
window.onload = function() {
document.getElementById("hello").innerHTML="Hello";
capitals = document.getElementById("capitalr");
var x = capitals.id;
var pps = document.shares.price.value;
};
function calculate () {
console.log("Hey");
console.log(capitals);
};
Related
I am working in a client development environment and have to adhere to their coding standards. I have the following JS and HTML. My observableArray is coming as not defined. I am not able to get it working. Even the console.logs are printing the correct values.
Please don't worry about ko.applyBindings. It is taken care of.
My JS Code:
define(
['knockout'],
function (ko) {
"use strict";
return {
onLoad: function (widget) {
widget.getDetails= function (prod) {
var abc = prod.DetailsNumbers();
console.log(abc);
var someArray= [];
someArray= abc.split(',');
//console.log(someArray);
var anotherObservableArray = ko.observableArray();
for (var i = 0; i < someArray.length; i++) {
var temp = {
"prodName": ko.observable(someArray[i])
};
anotherObservableArray.push(temp);
}
console.log(anotherObservableArray());
};
}
}
}
);
My HTML Code:
<div id="someId">
<table>
<tbody>
<tr>
<td>Button Here</td>
<td><button data-bind="click: getDetails(product())">Click me</button></td>
</tr>// this here is working fine
</tbody>
</table>
<ul data-bind="foreach: anotherObservableArray"> // this doesnt work
<li>
<span data-bind="text: prodName"> </span>
</li>
</ul>
</div>
anotherObservableArray is not defined
You don't expose anotherObservableArray outside the function scope you declare it in. Basically your code is of this format:
{
onLoad: function (widget) {
widget.getDetails = function (prod) {
var anotherObservableArray = ko.observableArray();
// push some items into the array
console.log(anotherObservableArray());
};
}
}
You somehow need to expose the anotherObservableArray outside the function. For example:
{
onLoad: function (widget) {
widget.getDetails = function (prod) {
var anotherObservableArray = ko.observableArray();
// push some items into the array
console.log(anotherObservableArray());
this.anotherObservableArray = anotherObservableArray; // Expose it on the function
};
}
}
Move var anotherObservableArray = ko.observableArray(); to your VM definition and ensure it's exposed (i.e. "public"). I am imagining you do have something like this:
var vm = {
// ...
// most likely you are exposing getDetails() already
// ....
anotherObservableArray: ko.observableArray()
};
// ...
ko.applyBindings(vm);
Separating javascript and markup is easy when the script doesn't have parameters. But how is it done with inline script lines that do? Example:
<td class="input-cell">
<input type="radio" name="action-type" id="change-add" value="change-add"
onclick="showSelectTables('none','none','none','table','none','none')">
</td>
(....)
<script>
function showSelectTables(set1a,set1b,set1c,setSetup,set2,set3) {
var _1a = document.getElementById('careSelector');
_1a.style.display = set1a;
var _1b = document.getElementById('module-I');
_1b.style.display = set1b;
var _1c = document.getElementById('clarificSection');
_1c.style.display = set1c;
var setup = document.getElementById('setup');
setup.style.display = setSetup;
var _2 = document.getElementById('module-II');
_2.style.display = set2;
var _3 = document.getElementById('module-III');
_3.style.display = set3;
}
</script>
.
I've tried all varieties I can think of, but all I'm getting is error reports, 'undefined' or the silent treatment from the browser. Is it possible at all, and if so, how? I would be looking for a vanilla javascript solution.
EDIT: see here for what I'm trying to achieve: http://en.wikipedia.org/wiki/Unobtrusive_JavaScript, section 2.
I suggest you to change your HTML generation logic to generate the followings:
<td class="input-cell">
<input type="radio" name="action-type" id="change-add" value="change-add" />
</td>
<script>
// just show 2 variables for demo
var settings = { change-add : { set1a: 'some_value', set1b: 'some_value' } }
$('#change-add').click(function() {
showSelectTables($(this).attr('id'));
});
function showSelectTables(the_id) {
var set1a = settings[the_id]['set1']; // which returns 'some_value'
// similar for set1b,set1c,setSetup,set2,set3
var _1a = document.getElementById('careSelector');
_1a.style.display = set1a;
var _1b = document.getElementById('module-I');
_1b.style.display = set1b;
var _1c = document.getElementById('clarificSection');
_1c.style.display = set1c;
var setup = document.getElementById('setup');
setup.style.display = setSetup;
var _2 = document.getElementById('module-II');
_2.style.display = set2;
var _3 = document.getElementById('module-III');
_3.style.display = set3;
}
</script>
Note: this assumes you use jQuery.
An important note: there is nothing wrong to use inline onclick, but it's a better pattern to separate JS and HTML
<script>
var a = document.getElementById("text").value;
function toupper()
{
var mystring = new String(a);
document.write(a.toUpperCase());
}
</script>
**HTML**
<input type="text" id="text" name="text" />
<input type="button" id="clickme" value="clickme" name="click" onclick="toupper();"/>
Why the variable "a" cannot be accessed in the "toupper" function?
Pull var a inside the function & you don't have to write new String(a)
function toupper() {
var a = document.getElementById("text").value;
document.write(a.toUpperCase());
}
http://jsfiddle.net/Fn4Ns/3/
The execution of the statement var a = document.getElementById("text").value fails, because when it is executed, the element with id value of text has not been parsed, i.e. does not exist. You need to have document.getElementById("text") inside the function, or otherwise at a point where the element exists.
the problem is that you are trying to execute
var a = document.getElementById("text").value;
before the document finished loading.
please try the following it should work.
var a;
document.addEventListener('DOMContentLoaded', function() {
a = document.getElementById("text").value;
});
function toupper()
{
var mystring = new String(a);
document.write(a.toUpperCase());
}
Variable a is declared outside so it's accessible in both scopes callback for document ready and toupper function.
Get the element value, after you make sure the page (DOM) has been loaded
You need to re-retrieve the reference to the text field on every function call.
DEMO
var writeNewLine = function(text) {
var addChild = function(node) {
window.document.body.appendChild(node);
};
addChild(document.createElement('br'));
addChild(document.createTextNode(text.toUpperCase()));
};
window.toupper = function() {
var mystring = document.getElementById("text").value;
writeNewLine(mystring.toUpperCase());
}
This will work. you assigned value before text boxes has loaded
function toupper(){
var a = document.getElementById("text").value;
document.write(a.toUpperCase());
}
I'm writing a small application in JS and I decided to use Knockout.
Everything work well except from a single value that is not printed correctly and I don't understand why.
This is the html view where error appends (viaggio.arrivo is not visualized, and in place of correct value appears a function code like this "function c(){if(0 <arguments.length){if ..." and so on)
<input data-bind="value: viaggio.arrivo" />
And this is the javascript View Model.
Code is pretty long so I put it in a jsFiddle.
function ViewModel() {
function Viaggiatore(nome, cognome, eta, citta) {
var self = this;
self.nome = nome; self.cognome = cognome;
self.eta = ko.observable(eta);
self.citta = ko.observable(citta);
}
function Viaggio(viaggiatore, partenza, arrivo, mete) {
var self = this;
self.viaggiatore = ko.computed(viaggiatore);
self.partenza = ko.computed(partenza);
self.arrivo = ko.observable(arrivo);
self.mete = ko.computed(mete);
}
self.viaggiatore = new Viaggiatore("Mario", "Rossi", 35, "Como");
self.viaggio = new Viaggio(
function(){ return self.viaggiatore.nome+" "+self.viaggiatore.cognome; },
function(){ return self.viaggiatore.citta; },
"Roma",
function(){ return "mete" ;}
);
}
ko.applyBindings(new ViewModel());
I think you need brackets on one of your parameters, like so:
<p data-bind="text: viaggio.partenza()"></p>
Check out the updated fiddle: http://jsfiddle.net/mGDwy/2/
(function($) {
var selectIds = new Array();
var sortOnSelect = false;
var nameModifier = "tsms";
function removeFormField() {
$(id).remove();
}
All the other functions after this work. This function says it undefined using firebug.
removeFormField is not defined
Another function creates this field and the top function is suppose to remove it.
<label for="txt4">Field 4 <input type="text" id="txt4" name="txt[]" size="20"> <a onclick="removeFormField("#row4"); return false;" href="#">Remove</a></label>
You need to put your function outside of the document ready function then call it from within.
(function($) {
var selectIds = new Array();
var sortOnSelect = false;
var nameModifier = "tsms";
removeFormField();
});
function removeFormField() {
$(id).remove();
}
In addition to the problem where the function is declared in the jQuery ready() handler, your function as written does not take an input value.
It should be:
function removeFormField(id) {
$(id).remove();
}