how to let javscript to change the element of the html which is in outside of folder

Question

My project includes files and folders, like:

--My Project
  |--index.htm
  |--index.js
  |--auth-system(folder)
      |--signin.html
      |--signup.html
      |--signout.html
      |--auth.js

I want to change some element values of index.htm using auth.js. My code in auth.js is like:

document.getElementById('userName').value = "ok"

where userName is the id name of a list element in index.htm

<li class="nav-item active">
<a id="userName" class="nav-link" href="#" target="myFrame">User</a>
</li>

I included auth.js in the index.htm by adding

<!-- Authentication js -->
<script type ="text/javascript" src="auth-system/auth.js"></script>

but it doesn't work...

Can you help me? thanks!

Possible duplicate of [Can external JavaScript access DOM elements from a different file?](https://stackoverflow.com/questions/34548969/can-external-javascript-access-dom-elements-from-a-different-file) — Saif, Jun 26 '18 at 05:36

Saif · Accepted Answer · 2018-06-26T06:05:25.970

1

Put the script tag after the element you want to modify (or before the closing body tag) and use document.getElementById('userName').text = "ok" instead of document.getElementById('userName').value = "ok".

./index.htm

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<li class="nav-item active">
<a id="userName" class="nav-link" href="#" target="myFrame">User</a>
</li>
<script type="text/javascript" src="./auth-system/auth.js"></script>
</body>
</html>

./auth-system/auth.js

document.getElementById('userName').text = "ok";

edited Jun 26 '18 at 06:05

answered Jun 26 '18 at 05:39

Saif

2,530
3
27
45

Later you can encapsulate the required statements under a function and call it on load `` where `myfunc()` executes the required statements inside it. – Saif Jun 26 '18 at 05:42
thank. Is it possible call javascript in auth.js to update the element in index.html. I want to do in this way. – affeto Jun 26 '18 at 05:44
Yes, it's possible. Try putting the ` – Saif Jun 26 '18 at 05:49
thanks. How to do for attaching the contents of both the files? I don't understand... – affeto Jun 26 '18 at 05:53
@affeto Edit your question and post your `html` and `js` file there. – Saif Jun 26 '18 at 05:55
Use `.text = "ok"` instead of `.value = "ok"`. [edited] – Saif Jun 26 '18 at 06:02
Edit your `html` code and put the whole `html` file there. – Saif Jun 26 '18 at 06:49
I have tried this on my own local system and this seems to work. – Saif Jun 26 '18 at 06:51

score 0 · Answer 2 · answered Jun 26 '18 at 06:06

0

You are using a <a> tag and some <li> tags. None of 'em gets a value attribute as per valid HTML is concerned. The value attributes are only available to form elements like <input>, <option> or the likes. I'm assuming you want to change the text from User to ok. In that case, just change the line in your auth.js to:

window.onload = function() {
  document.getElementById('userName').innerHTML = "ok";
};

answered Jun 26 '18 at 06:06

UtkarshPramodGupta

7,486
7
30
54

Thanks! the compiling error disappears, however value doesn't change from User to ok – affeto Jun 26 '18 at 06:24
the signin.html, signout.html and signup.html are displayed in a frame inside of index.htm. auth.js is used to work with sign**.html, but I also want it affect some element in index.htm. – affeto Jun 26 '18 at 06:51

how to let javscript to change the element of the html which is in outside of folder

2 Answers2