I have defined a drop down list in html as follows. I have appended the values for the dropdown from javascript. The value I am trying to set is "5". But it does not work. Can someone tell me another way?
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" src="JS/Util.js"></script>
<script type="text/javascript" src="JS/Language.js"></script>
<script type="text/javascript">
function dropdown(){
document.getElementById("numberlist").appendChild(5);
}
</script>
</head>
<body onload="dropdown();">
<div id="main3"></div>
<select id = "numberlist"><option>12</option><option>24</option><option>36</option></select>
</body>
</html>
Copying from the original question. Will this solve your issue?
function dropdown(){
var drp = document.getElementById("numberlist");
var optn = document.createElement("OPTION");
optn.text="3";
optn.value="3";
drp.add(optn);
}
Related
I'm creating a website for a school project with different arrays of facts. I created multiple files with different JavaScript facts arrays and am trying to call them in the index.html file but I'm not sure how to call them without an a href tag. I've researched and most people say to try sourcing in the tag but nothing is printing.
This is my index.html code:
<!doctype html>
<html>
<head>
<meta charset="utf8" />
<title></title>
<link rel="stylesheet" type="text/css" href="main.css" />
<script src="EllaFactsArray.html" type="text/javascript"></script>
</head>
<body>
<p>
Here is a fact about Ella:
</p>
<script>
getEllaFact();
</script>
</body>
</html>
This is my facts array (EllaFactsArray.html):
<html>
<title>Ella Facts</title>
<head>
<script type="text/javascript">
function getEllaFact()
{
Ella = new Array(6);
Ella[0] = "Ella had a six decade long career.";
Ella[1] = "";
Ella[2] = "";
Ella[3] = "";
Ella[4] = "";
Ella[5] = "";
i = Math.floor(Math.random() * Ella.length);
document.write("<dt>" + Ella[i] + "\n");
}
</script>
</head>
<body>
<script type="text/javascript">
getEllaFact();
</script>
</body>
</html>
The script needs to reference a JavaScript file, not an HTML file containing a function. Move the function into its own file and include it in the pages as needed.
<script src="EllaFactsArray.js" type="text/javascript"></script>
https://www.w3schools.com/js/DEFAULT.asp
I've got such simple html.
vkbeatuify.js is located in the same folder.
<html>
<head>
<script type="text/javascript" src="vkbeautify.js"></script>
<script>
var variable = vkbeautify.xml("<root><cat></cat></root>");
document.getElementById('data').innerHTML = variable;
</script>
</head>
<body>
<div id="data">
</div>
</body>
</html>
But when I open page in browser Firefox - it displays nothing.
What is the problem?
Ok I am probably doing something very silly that is preventing me from getting this to work, but here goes anyway:
I am trying to learn how to work with knockout and am trying to build a select list with options defined as an observable array. Here is the code:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="./knockout-3.0.0.js"></script>
<script type="text/javascript">
var viewModel = {
availableQuestions : ko.observableArray(['Who?', 'What?', 'When?'])
};
ko.applyBindings(viewModel);
</script>
<p>Questions to Ask: <select data-bind="options: availableQuestions"></select></p>
</body>
</html>
This is basically right out of one of their own examples but I cannot get it to work. The select list is not populated at all. I am using the latest version of Chrome (31.0.1650.57) and have looked in developer tools to see if there are issues. I have confirmed that everything is loading properly (ie: knockout is loading, the html is valid) still nothing. Am I missing something obvious?
here is the fiddle:
http://jsfiddle.net/janarde/r9pCK/
EDIT
Thanks to PW Kad It turned out to be that the DOM wasn't loaded before the binding:
EDIT
Thanks to Ek0nomik for pointing out the need to put knockout stuff after the markup.
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="./knockout-3.0.0.js"></script>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<p>Questions to Ask: <select data-bind="options: availableQuestions"></select></p>
<script type="text/javascript">
var viewModel = {
availableQuestions : ko.observableArray(['Who?', 'What?', 'When?'])
};
ko.applyBindings(viewModel);
</script>
</body>
</html>
You need to make sure you call applyBindings. Here is a working jsFiddle: http://jsfiddle.net/b4wHQ/
HTML
<p>Questions to Ask: <select data-bind="options: availableQuestions"></select></p>
Javascript
var viewModel = {
availableQuestions : ko.observableArray(['Who?', 'What?', 'When?'])
};
ko.applyBindings(viewModel);
Are you sure that the DOM is loaded before you are trying to apply bindings?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="./knockout-3.0.0.js"></script>
</head>
<body>
<p>Questions to Ask: <select data-bind="options: availableQuestions"></select></p>
<script type="text/javascript">
$( document ).ready(function() {
var viewModel = {
availableQuestions : ko.observableArray(['Who?', 'What?', 'When?'])
};
ko.applyBindings(viewModel);
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type='text/javascript' src="js/jquery/jquery-min.js"></script>
<script type='text/javascript' src="js/pure/pure.js"></script>
</head>
<body>
<div class='result'>Test Page</div>
<script type='text/javascript'>
$(document).ready(function(){
var p;
p = $("<div><ul><li></li></ul></div>");
directives = {"li": "error"};
data = {"error": "name must be between 3 and 250 characters long"};
p.render(data, directives);
$(".result").after(p);
});
</script>
</body>
</html>
The above codes don't insert data into p object.But the following works,
<html lang="en">
<head>
<meta charset="utf-8">
<script type='text/javascript' src="js/jquery/jquery-min.js"></script>
<script type='text/javascript' src="js/pure/pure.js"></script>
</head>
<body>
<div class='result'>Test Page</div>
<script type='text/javascript'>
$(document).ready(function(){
var p;
p = $("<div><ul><li></li></ul></div>");
$(".result").after(p);
directives = {"li": "error"};
data = {"error": "name must be between 3 and 250 characters long"};
p.render(data, directives);
});
</script>
</body>
</html>
It seems to insert data, the jquery object(here,it is p)must manipulate the existing html tags? It is not reasonable like the latter,i want the first codes to insert data,but how?
Thanks, :)
render returns always a node. And if the template is in the DOM, it is replaced with the rendered node.
You can do this:
p = p.render(data, directives);
$(".result").after(p);
or
$(".result").after( p.render(data, directives) );
I have an object tag with a blank data value and a menu of hyperlinks. I need the data value of the object tag to change to the href link set in each menu item upon click, preferably using javascript.
All help appreciated and thank you in advance.
EDIT:
Lets say i have an object tag with data="" If Link A has a href="this.html" I want the data attribute of object to become data="this.html" when Link A is clicked
On clicking the Anchors link the object data gets changed ,hoping this is what you want
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function() {
var thisObjectText=$(this).attr("href");
if(thisObjectText!=null && thisObjectText!="")
{
$('#swf').attr("data",thisObjectText);
alert($('#swf').attr("data"));
}
});
});
</script>
</head>
<body>
<div id="test">
Aaaa
Baaa
Caaa
Daaa
</div>
<object id="swf" width="400" height="400" data=""></object>
</body>
</html>
By going through your question what i analyzed is you have anchor tags on clicking those anchor tag " the value attached to that tag should pass to the objects"
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function() {
var obj=new Object;
obj={};
var thisObjectText=$(this).attr("name");
obj.value=thisObjectText;
alert("object value on clicking links " + obj.value);
});
});
</script>
</head>
<body>
<div id="test">
Aaaa
Baaa
Caaa
Daaa
</div>
<div id="result">
</div>
</body>
</html>