1

This is my first time posting so please do help if possible :)

I am making a web page but ran into an issue which u may help solve. There are 3 files:

  1. home.html--> Main page
  2. login.html--> Page with a form to be opened in an iframe within home.html
  3. hh.js--> javascipt file

My ultimate goal is to show the user name with will come instead of Login written on home.html after pressing the submit button on the login.html page.

Just for now I am just trying to change the word Login to anything else instead of the username.

The following is the code for hh.js(javascript file):

function goback(){
alert("yes") 
var str = document.getElementById("demo").innerHTML;
var res = str.replace("Login","ppap");
document.getElementById("demo").innerHTML = res;
}

Following is code for home.html file (main page) where login word is present

<a onclick="login()"><span id="demo">Login</span></a>

Following is the full code of the file Login.html:

<html>
<head>
<script language="javascript" src="hh.js">
</script>
</head>
<body bgcolor="#000033">
<br><font color="white">
LOGIN<br>
USERNAME:<input type="text" id="user"><br>
PASSWORD:<input type="password"><br>
<button onclick="goback()">Submit</button>
</body></font>
</html>

Problem-

The function goback() is present in both files to just to test. Both pages have a button (Login.html has submit button && home.html has a random button with same function).

When I click button on login (iframe in home.html), it runs alert with yes but does not change the Login word button when I run the button present in home.html with the same function, alert also come as well the Ling word changes to ppap.

What i think is happing- that the submit button runs but the getelementid search for id name in login.html instead of home.html.

Please if anyone can help me with targeting the getlementbyid to home.html, I would be very grateful but please give a very simple code as teachers in school wont understand the code. Also if there is any other easy possible method to do the same I may also receive those answers too asap like instead of using iframe i use to hide that area until function of login is called and then goback() function is called in the same page..

mplungjan
  • 169,008
  • 28
  • 173
  • 236
SXG
  • 11
  • 3

2 Answers2

1

There is no element with the id "demo", therefore JavaScript can't find it and does not know where to apply the text. Try putting the text you want to replace into a div or span element:

<span id="demo">LOGIN</span>

Also, "Login" is not the same as "LOGIN", so when you try to replace "Login" there is nothing to replace. But if you try to replace "LOGIN" then it will work.

var res = str.replace("LOGIN","ppap");

This would also work:

var res = "ppap";

Also, don't forget to add the semicolon after each line of a javascript function call, you missed one in your code.

Marius B
  • 769
  • 3
  • 16
  • 35
  • same as the other guy...look again my friend....i want to edit the word Login from the main page html file and not from the login.html file.... it is replacing the Login with ppap but only when i hit the function using button inside in the main page html file but cant change using button in the login.html file... – SXG Feb 05 '17 at 12:19
  • What do you mean by "edit the word Login from the main page html file"? I don't see how these two files are connected in any way. If you open two html files at once that means you have two webpages opened and they cannot interact with each other in any way. If you want to save a variable that could be accessible in several different pages, you need to use a database or at least LocalStorage or SessionStorage. – Marius B Feb 05 '17 at 15:46
  • your are right in a way....these files are just connected/share the common javascript file...by 'edit Login from main page' means that i want to change the word Login within the html code to whatever i need, in this case to ppap...just i cant get getelementbyid to work in home page while calling function from another page....the switch from Login to ppap occurs when the function is called from the same page though. – SXG Feb 05 '17 at 17:55
  • Could you upload your whole code to plnkr.co or jsfiddle.net? Because we can't help you if we don't understand in what way your html files are connected to each other. – Marius B Feb 07 '17 at 08:58
  • http://embed.plnkr.co/CivwWEM4oG5zQiqURVuK/ this is the link bro...the "Login" on index.html beside Sign up needs to change to ppap when i click on the submit button(which comes when "Login" is pressed(submit button is present in login.html which is another page ) in iframe .....just to try this function i also put another button on the index page itself beside the textbox – SXG Feb 08 '17 at 15:05
  • First of all, instead of opening iframe in a window, I suggest you to create it in your page, read more here: http://stackoverflow.com/questions/10418644/creating-an-iframe-with-given-html-dynamically Then you should be able to access your element as described here: http://stackoverflow.com/questions/14451358/how-to-pick-element-inside-iframe-using-document-getelementbyid Secondly: may I ask you why do you use iframes? Is it mandatory for a school project or something? Why don't you simply create a hidden div element in the same page and show it when Login is clicked? – Marius B Feb 11 '17 at 07:30
0

You will need this:

function login() {
    document.getElementById("demo").innerHTML = "Logout";
}

to change the test in

<a onclick="login()"><span id="demo">Login</span></a>

Its a bit difficult to read your question but to show an element try

js

document.getElementById("demo").style.display = "block";

css

#demo {display: none;}
Web Dev Guy
  • 1,693
  • 3
  • 18
  • 42
  • (not solved)Thank you my friend..this was a little helpful but my question is still not cleared......the code line u gave me works the same as what my does but my problem is that when i call the function from another page i.e login,html....the replace does not happen but when i call the same function from the same page, replacing takes place...i know the function from login.html(other page) runs the function as 'alert' is being run but not the replacing... – SXG Feb 05 '17 at 12:28
  • Can you give me the html code for both pages. will help cheers. – Web Dev Guy Feb 05 '17 at 21:40
  • i cant put the whole code due to word limit so the following is the only code which is connected to this present in the homepage: and this line from hh.js(javascript file): function login() { window.open("login.html","theFrame") } – SXG Feb 06 '17 at 09:24