This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(265.6, 78%, 35%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EMA%3C/text%3E%3C/svg%3E)
I want to develop my own webpart spfx sharepoint online :I have a simple code html/javascript and I want to insert this code on my webpart spfx.
the HTML code I inserted on render and still JavaScript this is an image to explain
Hi @Mustapha Ait Bencheikh ,
Could you elaborate on your requirements and issues encountered? If possible, please attach a screenshot of the page in question and the full js code.
My problem I'm new to SPFX framework and I've already created my first helloworld-webpart, I followed the Microsoft steps. Now I want to customize this webpart to add my own HTML/Javascript code, please find below the webpart capture plus the code to inject.
Please re-upload the image, I can only see the wrong URL.
I think there is a probleme to loading images ... it didn't work for me, can I have your Email adresse
You can click here to upload pictures, and the code can be uploaded as an attachment.
Company policy does not allow us to publish such private information on the forum, thank you for your understanding.
I think it's Navigator problem
This is my webpart
and this is the code html/javascript
Thank you for your Help !
Property 'txt' does not exist on type 'HTMLElement'.
Can you describe your requirements? Then I will help you complete it.
I want to Run this code on Image 1 on my SPFX framework(image 2): but the Id's : txt and h still undiffined 
There is the Id's undefined and I didn't get how to resolve it
We could use document.getElementById(id) to get the target element.And you could take a reference to add event listener for button click:https://social.technet.microsoft.com/wiki/contents/articles/53182.spfx-webpart-how-to-add-event-listener-for-button-click.aspx
My test code for your reference:63865-code.txt
Test result:
If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
It didn't work I think there is probleme of loading data but I didn't get the solution
You could get my test project here:https://github.com/Amos-MSFT/SharePoint-FrameWork-Demos/tree/master/NoFrameWork
Many Thanks @Amos Wu-MSFT Finaly it works good, but I didn't get why theres a difference between Javascript code in SPFX for Ex: document.getElementById ....
There is document.getElementById() method in JavaScript, and the SharePoint FrameWork is based on TypeScript, there are some syntax that will be different from JavaScript.
Depending on the settings of the typescript compiler, you can also write JavaScript code in TypeScript code directly.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(163.2, 10%, 25%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EDP%3C/text%3E%3C/svg%3E)
Hi
Please the step-by-step article.
https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part
Thank you !