How to use script to change element (with require)

Question

I have a script that returns a string (E.G "Lunami's Current Name Is: bigmon) I would like the script to run and replace a element in my document (id: replace) but its not working and gives me this error? Is there any way I can get this to work?

Note: leaguejs is a npm pacakge

Code

var Leaguejs = require('leaguejs')
const leaguejs = new Leaguejs("KEY!123123123");

var summonerId = 'EXzNQLirRTxF_-l5-MYhE0RN-1i5rO-TDmHmdEzgf3psI94'
var accountId = 'BteGB3awYZqnAzYXnR2Bfo9NcqxvbP4DW-tsvJ5LR_u9rejnu2ArF5Gc'
var documentToChange = document.getElementById("replace")

leaguejs.Summoner.gettingById(summonerId, 'oce').then(data => {
    leaguejs.Summoner.gettingById(summonerId, 'oce').then(data => {
        documentToChange.innerHTML = `Lunami's Current Username Is: "${data.name}"`
    }).catch(err => {
        leaguejs.Summoner.gettingByAccount(accountId, 'oce').then(datE => {
            documentToChange.innerHTML = `Lunami's Current Username Is: "${datE.name}"`
        }).catch(err => {
            documentToChange.innerHTML = "Lunami's Broken ;-;"
        })
    })
});

<!DOCTYPE HTML>
<html lang="en">

<head>
    <title>Lunami Tracker</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">

    <link rel="stylesheet" href="./style.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700%7CPoppins:400,500" rel="stylesheet">
</head>

<div class="main-area center-text" style="background-image:url(./image.png);">
    <div class="display-table">
        <div class="display-table-cell">
            <h3 class="title font-white" id='replace'>Loading . . .</h3>
            <p class="desc font-white" id="trackMsg"></p>
            <ul class="social-btn1 font-white">
                <li><a href="https://discord.gg/Guc7rkZ">Discord</a></li>
                <li><a href="https://www.twitter.com/whynotbefriends">Twitter</a></li>
                <li><a href="https://www.twitch.tv/whynotbefriends">Twitch</a></li>
            </ul>
        </div>
    </div>
    <script src="index.js"></script>
    </body>

</html>

After using Import Leaguejs from 'leaguejs' I get this error

Access to script at 'file:///home/alphamale/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Are you running this on a nodejs server? Or just a simple apache server which has php as a back-end? — Chiel, Jun 09 '20 at 09:34
@Chiel Im running it on a expressjs server, should i try run it off that? — Supesu, Jun 09 '20 at 09:42
No, this is fine, I just wanted to make sure you were running it on a server that supports import by `require()`. — Chiel, Jun 09 '20 at 09:48

bill.gates · Accepted Answer · 2020-06-09T09:58:43.907

1

require or CommonJS is used in an Node.js environment

For the browser we use import .. from ..

import Leaguejs from 'leaguejs'

To avoid this error:

Access to script at 'file:///home/alphamale/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension,

You will need to set up an local server to server your files over http instead of file://

edited Jun 09 '20 at 09:58

answered Jun 09 '20 at 09:35

bill.gates

14,145
3
19
47

This worked, but I'm getting a error (ill add to Og post in a second) – Supesu Jun 09 '20 at 09:45
@Unkwn you need an http server not `file:///`, so set up an local server – bill.gates Jun 09 '20 at 09:48
1

@Unkwn if you use visual studio code editor there is an extension called "Live Server" with it you can set up an live server – bill.gates Jun 09 '20 at 09:49

How to use script to change element (with require)

Code

1 Answers1