Passing variable values to and from an inside iframe - javascript

I have a script in the iframe html file, and one in the main html file. I guess I can give names to these scripts if needed (its seems you can give names to everything).
I am trying to pass variable values to and from the main html file and the iframe.
So in the main file I wrote :
<script>
var test2 = 21;
document.getElementById("bottom1").innerHTML=test2;
</script>
This functions, it displays 21.
I have a button :
<div class="button" id="button" align="center">
<form>
<input type="button" value="New" onclick="clearValues(); return false;">
</input>
</form>
</div>
I have a function :
function clearValues() {
window.frames['middle'].test = test2;
document.getElementById('middle').contentWindow.location.reload();
}
In the frame, I have :
<script id="here">
... Some stuff ...
var test;
document.getElementById("up1").innerHTML=test;
</script>
This functions, it displays "undefined". But when I click the button, it still displays "undefined" instead of 21. I guess the variable "test" gets redefined when the iframe is reloaded.
But how to avoid that beats me.

No one seems to offer a clever suggestion, so I'll use cookies. Global variables names and values are going to be stored in a cookie. KISS (= "Keep It Simple and Supid").
Then I can have 2 functions, one which returns the value of the variable given its name and one which sets it.
If later on someone has a better idea, I would be very interested to read it.

Related

How do I show a variable change

I'm new to coding. I'm trying to make a website to track my homework. I want it to show what I have to do. This is my code.
<p id="demo">To do now.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "do"'>Click Here!</button>
var do="5";
how do I get "To do now." to 5.
You can't have Javascript just floating in an HTML file, as your browser won't know what to do with it. All Javascript should either be enclosed by <script> tags or in an external file and referenced with a <link> tag.
Correct me if I'm wrong, but as I understand it, you want the "To do now." to change to 5.
If so then you don't need your do variable. You would just change your onclick attribute value as follows:
<button type="button" onclick='document.getElementById("demo").innerHTML = "5"'>Click Here!</button>
Alternatively, if you wanted to have the text to change to 5 using a Javascript variable, you would open a script tag and insert a function to do so like this:
<script type="text/javascript">
function changeText() {
var doo = 5;
document.getElementById('demo').innerHTML = doo;
}
</script>
<p id="demo">To do now.</p>
<button type="button" onclick="changeText()">Click Here!</button>
I'm not too sure why you want to do this but I gave you this option anyway incase you did.
As you can see, I changed the do variable that you used to doo as you can't use the first version as a variable name. This is due to the fact that we use do as a keyword for loops. Check out w3's page on do/while loops here.
If you say you're new to programming then I thoroughly recommend using w3 schools HTML, CSS, and Javascript tutorials as once completed, you should have a much better understanding about how Javascript interfaces with HTML.
do is a predefined word in JavaScript, so you cannot use it as a variable. try something else. you can try this
<p id="demo">To do now.</p>
<button type="button" onclick="var doit='5'; document.getElementById('demo').innerHTML = doit;">Click Here!</button>
I don't recommend declaring functions in the html structure. It is better to put the JavaScript logic in the file separately, as in my example.
var inner = '5';
document.querySelector('button').onclick = function() {
document.getElementById("demo").innerHTML = inner;
}
<p id="demo">To do now.</p>
<button type="button">Click Here!</button>

why I cant access to value of hidden input element by javascript?

I have an page that I cant use value of hidden input in if clause.
and dont print anything in page.
I use this javascript command past days and worke but dont work here.
my code is:
<script type="text/javascript">
function ch()
{
alert();
document.write(" brnd = ");
var c=document.getElementById("brnd").value;
document.write(document.getElementById("brnd").value);
document.write(document.forms["br"]["brnd"].value);
}
window.onload=ch();
</script>
</head>
<body >
<form id="br">
<input type="hidden" id="brnd" value="0000pp" />
</form>
<p>Page Description.
</p>
<div id="brands" style="" >
<ul style="height:20% !important;width:90% !important;">
<li>y.t</li>
<li>ez</li>
<li>am</li>
<li> group iks</li>
<li>frtc</li>
<li>armco</li>
</ul>
</div>
</body>
Where is the problem in your opinion?
=============================================
#Rocket Hazmat: thanks for your note.one problem was place of ch.i move ch to after input and work.but have another problem that i dont know how solved. anyway code work now.thanks all.
window.onload=ch();
This line will run the ch() function and set window.onload to its return value. ch() returns undefined, so you will not be setting onload to anything.
You want to do:
window.onload = ch;
In JavaScript, functions are like other variables. You can just pass them around normally. You use () to call them.
NOTE: document.write should never be used. Using it is most likely your other issue here. Once the page is fully loaded, document.write will destroy your page. It will erase it all and replace it with whatever you passed.
Because of this, your hidden element would be deleted and therefore you can no longer get its value.

Changing input value with javascript - what went wrong?

I have a text with an input field. I want the field to start as blank, and when clicked upon, set the input's text to its correct value (saved in the "name" field, for instance).
If I do it this way, it works fine:
Buy <input type="text" name="eggs" onclick="this.value=this.name;"> tomorrow.
However, if I try to clean the DOM and move the function to a separate javascript file, it stops working:
HTML:
Buy <input type="text" name="eggs" onclick="showname(this);"> tomorrow.
JS:
function showname(el) {
el.value = el.name;
}
function showname(el){
el.value = el.name;
}
.closeform{
width: 70px;
}
.closeform input {
width: 70px;
}
.closeform button {
width: 70px;
}
Buy
<span class="closeform">
<input type="text" name="eggs" onclick="showname(this);">
</span>
tomorrow.
I'm very new to Javascript - what am I missing here?
You say in your question:
However, if I try to clean the DOM and move the function to a separate javascript file, it stops working
Let's say you have 2 actual files in the same folder:
myscript.js contents:
function showname(el) { el.value = el.name; }
index.html contents:
<!DOCTYPE html>
<html><head><title>Demo</title>
<script src="myscript.js"></script>
</head><body>
Buy <input type="text" name="eggs" onclick="showname(this);"> tomorrow.
</body></html>
OR
<!DOCTYPE html>
<html><head><title>Demo</title>
</head><body>
Buy <input type="text" name="eggs" onclick="showname(this);"> tomorrow.
<script src="myscript.js"></script>
</body></html>
That should work perfectly...
However, in the comments you say:
I tried it with Fiddle - maybe the problem is in Fiddle interface.
That is where your problem was....
There is no separate javascript-file in jsfiddle.
The three code-blocks (html, js, css) get merged into one file.
Right-click the result-window in jsfiddle and look at the generated file.
Then notice the options (top right corner) from jsfiddle: by default the code is wrapped in an onload-method (suiting to the library you selected or window.onload if you are not using a library).
You can however place the script in the head or body, thereby not wrapping your code inside a function's scope (which then closes over the containing identifiers).
See http://jsfiddle.net/wf55a5qb/ for a working example.
The reason your example stack-snippet worked here on StackOverflow is that it's snippet-editor does not wrap the javascript codeblock in a (onload-like) function (when it combines the three code-blocks).
Having said and explained this, I do encourage you to set your events (Using obj.addEventListener/obj.attachEvent or the direct elm.onevent) from the/a script once the elements (that your script manipulates, place script as last element of the html-body) or page (using window.onload/etc) has loaded.
I posted this to clear up what actually went wrong so you don't make false models in your head about how javascript works (like "an external script runs in it's own scope" which no-one claimed but might be an assumption you might make) whilst still learning it!
Everything in JavaScript has a scope. Where you are defining your function, it is not visible to the input so the input doesn't know that function even exists. You can use window to make the function visible to it:
<input type="text" name="eggs" onclick="window.showname(this);"/>
window.showname = function (el)
Fiddle
I don't recommend global functions though. So then what else?
You can use the onclick function in JavaScript. To find elements in JavaScript, you use selectors. I'm using getElementById() this will get an element by it's id. A list of selectors are here
<input id="my_input" type="text" name="eggs"/>
Then in JavaScript:
document.getElementById('my_input').onclick = function () {
//Use this to refer to the element
this.value = this.name;
};
Fiddle
When doing this. Make sure all your code is wrapped in a window.onload. This will make sure the code is run at the right time:
window.onload = function () {
//Your code
};
JSFiddle automatically puts your code in this.

javascript variable undefined or null

couldn't find a specfic answer elsewhere. I'm totally new to JS and trying to pull a value out of a form and write it to the page. The result when I try to write ProductName is undefined, and when I try to write ProductNameElement is null. I'm sure it's to do with the form values being empty when the page loads but not sure after that...
<script>
var ProductNameElement = document.getElementById("ProductName");
var ProductName = ProductNameElement.value;
function showname(){
document.write(ProductName);
}
</script>
<h2>Revenues</h2>
<div class="number">Product Name: <input type="text" id="ProductName" value=""></input></div>
<input type="button" value"showname" onclick="showname();"></input>
You are running the first two lines of your script too early BEFORE the elements in your page have been parsed and placed into the DOM. Because of that, the ProductName element doesn't exist yet when you're trying to find it with document.getElementById("ProductName");.
Place your script right before the </body> tag and then all your page elements will be available when you run your script. Or, just put all your code in the showname function that isn't called until the click event.
function showname(){
var ProductNameElement = document.getElementById("ProductName");
var ProductName = ProductNameElement.value;
document.write(ProductName);
}
And, as others have said, using document.write() after the documented has been loaded will cause the existing document to be cleared and a new empty document will be created. This is pretty much never what you want. If you're just doing this for debugging, use console.log(ProductName) and look at the debug console.
You'll have to get the element and the value inside the function, otherwise they aren't available, and the change of the value isn't caught
<script>
function showname(){
var ProductNameElement = document.getElementById("ProductName");
var ProductName = ProductNameElement.value;
document.write(ProductName);
}
</script>
<h2>Revenues</h2>
<div class="number">
Product Name: <input type="text" id="ProductName" value="" />
</div>
<input type="button" value"showname" onclick="showname();" />
FIDDLE
And inputs are self closing, and you should stop using document.write, it will overwrite the entire document and remove everything that is currently there !

How to refer html element id specified in visualforce and pass onto javascript function?

I have apex tag that generate input text field.
<apex:page id="my_page">
<apex:inputText id="foo" id="c_txt"></apex:inputText>
</apex:page>
When someone clicks this field, I want to execute javascript.
But when I check the HTML source, this apex tag which becomes input tag has (I think) dynamically generated part.
<input type="text" size="50" value="Tue Nov 16 00:00:00 GMT 2010"
name="j_id0:j_id3:j_id4:c_txt" id="j_id0:j_id3:j_id4:c_txt">
As you can see id has junk part :(
id="j_id0:j_id3:j_id4:c_txt"
In my Javascript I'm trying to getElementById('c_txt') but this does not work of course. How to deal with this???
UPDATE
Seems like I can do this but not working...
<apex:includeScript value="{!URLFOR($Resource.datepickerjs)}"></apex:includeScript>
<apex:inputText id="foo" id="c_txt" onclick="javascript:displayDatePicker()" />
datepickerjs
var elem = getElementById('c_txt');
alert(elem);
The alert shows 'null' so something must be wrong.
Even this alert returns null...
var targetDateField = document.getElementById('{!$Component.my_page:c_txt}');
alert(targetDateField);
You can use the $Component notation in javascript, you use it like so:
var e = document.getElementById("{!$Component.ComponentId}");
One thing to be wary of though, is if your element is contained within several levels of Visualforce tags which have IDs:
<apex:pageBlock id="theBlock">
<apex:pageBlockSection id="theBlockSection">
<apex:commandLink action="{!someAction}" value="LINK!" id="theLink"/>
// snip
// in javascript you would reference this component using:
document.getElementById("{!$Component.theBlock.theSection.theLink}");
I got solution to my problem.
$Compoent global visualforce expression can only be used in visualforce code not inside of
Javascript as far as my search.
Below code works fine. It outputs the value in the inputText field to js alert message Now you can pass id attribute to the Javascript and process whatever the task needed.
Created Date: <apex:inputText id="dah" value="{!created}" size="50"
onclick="javascript:go('{!$Component.dah}')"></apex:inputText>
<script>
function go(field) {
var huh = document.getElementById(field).value;
alert(huh); //returns the string u put inside of input text field
}
</script>

Categories

Resources