Importing module not working

JavaScript
1

I want to display the name on the browser after the user input it on the form. I tried to import the function but it isn’t working. What am i doing wrong?

const myName = (name) => {
let tag = document.getElementById(“name”).value;
let tagg = document.getElementById(“drop”).innerHTML = tag;
document.getElementById(“name”).reset().
}

export {myName}

it is in a folder called myjs.js and the file name is java,js

			<form id="form">
				<label>Input full name</label>
				<input type="text" name="name" id="name">
				<button type="button" onclick="myName()">Submit Name</button>
				
				<script type="module">
					import {myName} from './myjs.js';
					myName()
				</script>

			</form>

			<p id="drop"></p>

		</section>
2

Just attach the export keyword to the beginning of the function.
Like this

export const myName = (name) => {...}
4

try import myname form ‘./my.js.js’

1 Like
5

Hi,

There are two things :
-If you want to import myjs.js like that your module file have to be store in the same folder of the html and have to the name “myjs.js”.
-This import doesn’t work when your website is local, you need a server.

But you can just import your js file with “<script src="myjs.js"></script>”, and be carreful in you js you use “ in place ".

6

thanks but I don’t think the problem is from how i exported the function.

7

my file is in the same folder as my HTML. Also i am using Wampserver. Is that what you mean?

The last part also didn’t work.

This is tiring lol

8

Ok your myjs.js:

const myName = () => {
let tag = document.getElementById("name").value;
let tagg = document.getElementById("drop").innerHTML = tag;
document.getElementById("name").value = "";
};

Your html :

<script src="myjs.js"></script>
<form id="form">
	<label>Input full name</label>
	<input type="text" name="name" id="name">
	<button type="button" onclick="myName()">Submit Name</button>
</form>
<p id="drop"></p>
</section>