I have the following code. The first time the function is called the iframe changes contents to newPage but the second time the function is called the page doesn't change.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Submit</title>
<script>
var url = 1;
function setURL(url){
var win1 = "http://localhost/Audio/src/submit1.html" ;
var win2 = "http://localhost/Audio/src/newPage.html";
if (url === 1){
document.getElementById('iframe').src=win2;
url=2;
}
else{
document.getElementById('iframe').src=win1;
url=1;
}
}
</script>
</head>
<body>
<iframe src="http://localhost/Audio/src/audio.html" style="width:0;height:0;border:0; border:none;"></iframe>
<iframe id="iframe" style="border:0; " src="http://localhost/Audio/src/submit1.html">
</iframe>
<input type="button" value="click me 71" onclick="setURL(url)">
</body>
</html>
You have two variables called url.
The one defined as a global and the one defined as the function argument.
Your function only changes the one defined as the function argument, which isn't preserved anywhere.
If you want to modify the global one: Don't define the argument in the function definition (and don't bother passing an argument to the function).
since you are passing the same name as parameter (url) you have to explicitly say which one do you want to change or change the parameter name (from url to u for instance)
Related
The problem is this: inside my main page (parent.html) I have an iframe (child.html) and a script block. In that script block there is a array of integers and a function that adds elements to the list. In the iframe there is a new function that adds an element to the list of the main file (parent.html).
I would like to know if it is possible for the iframe (child.html) to access this function found in parent.html. Example:
parent.html
<html>
<head>
<title>Parent</title>
<script>
var parentList = [0];
var counter = 0;
function addValue(){
counter++;
parentList.push(counter);
console.log('parent', parentList);
}
</script>
</head>
<body>
<button onclick="addValue()">Add Value (Parent)</button>
<br />
<iframe src="child.html" allowfullscreen></iframe>
</body>
</html>
child.html
<html>
<head>
<title>Child</title>
</head>
<body>
<button onclick="addValueInternal()">Add Value Child</button>
<script>
var internalCount = 0;
function addValueInternal() {
internalCount++;
parentList.push(internalCount);
console.log('child', parentList);
}
</script>
</body>
</html>
The error:
child.html:12 Uncaught ReferenceError: parentList is not defined
at addValueInternal (child.html:12)
at HTMLButtonElement.onclick (child.html:6)
Yes. it is possible. Based on an example calling a function defined in the parent from an embedded iframe.
So in your case, you would have to reference the parent when accessing your array.
function addValueInternal() {
internalCount++;
parent.parentList.push(internalCount); // here we access the reference
console.log('child', parentList);
}
Be aware that you may encounter problems concerning the cross-origin policy afterwards.
I have tried to call the function using window.onload but it works only when I place it body tag as below but when I place it in the head tag (commented out) it doesn't work though the function gets called (I have put an alert and checked.)
<!DOCTYPE html5>
<html>
<head>
<script>
function onl()
{
var x=document.forms[0].elements[0].name;
document.write(x);
}
//window.onload = onl();
</script>
</head>
<body>
<form name=usern>
<input type = "text" name ="username">
<input type = "password" name ="password">
<input type ="submit" name="sybmitb">
</form>
<script>
window.onload = onl();
</script>
<div id = "txt">
</div>
</body>
</html>
It doesn't run in the head because the brackets used after the assignment cause the function to immediately be run. That mean it causes an error because the document hasn't loaded yet and so causes the form elements to be undefined.
In the head, if you change
window.onload = onl();
to
window.onload = onl;
Then it will work.
You must pass the handler function to document.load (or window.load), not the return of your function. So use document.onload = onl; instead of document.onload = onl(); (see more here : https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload)
So in result :
<!DOCTYPE html5>
<html>
<head>
<script>
function onl()
{
var x=document.forms[0].elements[0].name;
document.write(x);
}
document.onload = onl;
</script>
</head>
<body>
<form name=usern>
<input type = "text" name ="username">
<input type = "password" name ="password">
<input type ="submit" name="sybmitb">
</form>
<div id = "txt">
</div>
</body>
</html>
Regards,
Julien Q.
Edit : Sorry I misread before ;)
When you assign a function like that, you need to be sure not to invoke it. When you put parentheses on the end of a function name, it will be invoked immediately even if it's being assigned to something like the window's load event.
So, you simply have to replace onl() with onl:
window.onload = onl;
As for why it works in the body, it's because the document has pretty much finished loading when it gets to the end of the body.
Assigning onl() to the window's onload property isn't erroneous because you're assigning the return value of onl(), which is undefined, to window.onload.
Also, I'd recommend not using window.onload but document.onload, because document.onload is fired when the DOM is ready, not when the files requested are ready.
I want to set a permanent value to a div element with jQuery;
the full js file:
$(function () {
var $a;
var $b;
$('button').click(function () {
$a = $('#a').val();
$b = $('#b').val();
var $big = getBigger($b, $a);
var $small = getSmaller($b, $a);
$('#bigger').text($big);
$('#smaller').text($small);
});
});
//a simple function for getting a bigger element
function getBigger(a, b) {
return a ^ (a ^ b) & -(a < b);
}
//a simple function for getting a smaller element
function getSmaller(a, b) {
return (a < b) ? a : b;
}
the full html file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style/style.css">
<title>Compare</title>
</head>
<body>
<form>
Enter a: <input type="number" id="a"><br/>
Enter b: <input type="number" id="b"><br/>
<button> Compare</button>
<div id="bigger"></div>
<div id="smaller"> </div>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
The problem is that when I leave the scope the variable gets destroyed
PS. Now I realise that my mistake is that when a <button> is added in a form element, everytime the button is pressed, the data in the form gets reseted
When you run code within a function it creates a scope. Each variable you define using the var statement will be available only in that scope.
To create a variable for usage outside of the current scope, either declare a variable without putting var beforehand or directly write window.varname = value. Have another read on that topic.
Besides that, in your code $('#bigger').text($big); the var $big never even gets defined, so maybe that is the problem.
And setting an elements text works independent from scopes or variables.
Try this
To Access:
$("#a").data('value');
To Set
$("#a").data('value' , 'whatevervalue');
To Access Without JQuery:
document.getElementById("a").dataset.value;
To Set Without JQuery;
document.getElementById("a").dataset.value = "Some Value";
A Div cannot hold the Value attribute unless you use:
document.getElementById("a").setAttribute("value" , "val");
Then to Assign it to Inside your div:
$("#myDivElement").html($("#a").data('value'))
I am trying to pass element ID as one of the function's parameters:
sap.ui.getCore().byId("idView1").getController().addField("selectedFieldsContainer", oItem);
The definition of the addField function is as follows:
addField: function(sId, oItem){
var oSelectedFieldsContainer = sap.ui.getCore().byId(sId);
oSelectedFieldsContainer.addItem(oItem);
}
When I run the code, I get error:
Uncaught TypeError: Cannot read property 'addItem' of undefined
But if I try to explicitly define the id:
sap.ui.getCore().byId("idView1").getController().addField(oItem);
while the function's definition is:
addField: function(oItem){
var oSelectedFieldsContainer = sap.ui.getCore().byId("selectedFieldsContainer");
oSelectedFieldsContainer.addItem(oItem);
}
the code works.
I don't understand why the first example doesn't work.
What am I missing?
Thank you.
UPDATE
HERE is JSBIN. I want to update control's type. I try to pass this control's id as a parameter, but sap.ui.getCore().byId() can't find it (see console message).
You should know that calling
sap.ui.getCore().byId("control")
does not return a String. From the variable name sId I can guess that you were expecting to receive a String. Instead it returns the control with the given id. Then because of this your changeType() function does not work. Either you pass a reference to the found control to your changeType() function or you pass the string sap.ui.getCore().byId(sId). The jsbin passes the found control instead of the id. Passing the id string would be easy as well...
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>Example</title>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m,sap.ui.layout"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-bindingSyntax="complex"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="sync"></script>
<script type="text/javascript">
function changeType(oControl, sType){
oControl.setType(sType);
}
var oButton = new sap.m.Button({
text: "Update Control Type",
press: function(){
var oControl = sap.ui.getCore().byId("control");
var sType = "Password";
changeType(oControl, sType);
}
});
var oItem = new sap.m.Input("control");
new sap.m.HBox({
items: [oButton, oItem]
}).placeAt("content");
</script>
</head>
<body id="content" class="sapUiBody">
</body>
</html>
Sorry, everyone.
The problem was hiding elsewhere.
Please see the answer to this question.
Here is the working edit Fixed.
The issue is you are passing the object reference in sId field whereas getCore() expects a string. sId.sId get the id of the control you are passing and this appears to work.
I have written the following code to display an input with Javascript's alert( ... ) function.
My aim is to take a URL as input and open it in a new window. I concatenate it with 'http://' and then execute window.open().
However, I just get 'http://' in the URL name, even after concatenation, and not the complete URL. How can I fix this?
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<body onload="onload();">
<input type="text" name="enter" value="" id="url_id">
<input type="button" value="Submit" onclick="func();">
</body>
<script type="text/javascript">
var url;
function onload() {
url = document.getElementById("url_id").value;
}
function func(){
var var1 = "http://";
var var2 = url;
var res = var1.concat(var2);
alert(var2);
//window.open(res);
}
</script>
</head>
</html>
You shouldn't be calling it in onload(), only after the user has entered the url into the input field. Of course its an empty string, because you assign url to the value of #url_id before the user has a chance to enter anything when you place it in onload().
function func(){
var var1 = "http://";
url = document.getElementById("url_id").value;
var var2 = url;
var res = var1.concat(var2);
alert(var2);
//window.open(res);
}
Others have given solutions, and you already have accepted one. But none of them have told you what is wrong with your code.
Fristly, you have a body element inside your head element. This is invalid markup. Please correct it:
<html>
<head>
<!-- this is a script -->
<script type="text/javascript">
// javascript code
</script>
</head>
<body>
<!-- this is an inline script -->
<script type="text/javascript">
// javascript code
</script>
</body>
</html>
Secondly, you need to have an idea about the execution order of JavaScript inside browser windows. Consider this example:
<html>
<body onload="alert('onload')">
<p>Lorem Ipsum</p>
<script type="text/javascript" >
alert('inline');
</script>
</body>
</html>
Which alert do you thing will get executed first? See the JSFiddle.
So as you can see, inline JavaScript will be executed first, and then the browser will call whatever code is in <body onload=.
Also, onload function is called immediately after the page is loaded. And user has not entered anything when the function is executed. That is why you get null for url.
function func()
var url = document.getElementById("url_id").value;
var fullUrl = "http://".concat(url);
alert(fullUrl);
// or window.open(fullUrl);
}
You're not concatenating with a String but with an Object. Specifically an HTMLInputElement object.
If you want the url from the text input, you need to concatenate with url.value.
if its not concatenating, use:
var res = val1+val2.value;