[SOLVED] Add javascript to html error

Help & Support
1

Hi, i try to add java script to my html but dont work.

Uilungime.attributes.add('script123', {type: 'asset'});

var script = document.createElement('script');
script.src = this.script123.url;
document.head.appendChild(script);

What can i do? Thanks

2

Why do you need to add it dynamically?

3

I dont know another method.

I tried with script in html but dont work.

4

You have a couple of options:

Write the code in a JS file and have it preloaded. All the game scripts are automatically added to the HTML page when loaded

Change the loading type to Before or After Engine. This will add the JS file before or after the engine JS file on the index.html

image
image706×216 15.8 KB

5

Not work.

I have this js with name “loadhtmlscript.js” i tried every options but script dont work.

I put preloaded on my script appear on html like

"scriptsBeforeEngine":[{"url":"api/assets/files/loadhtmlscript.js?id=91625413&branchId=7ef2c363-809a-49f2-8176-1a448cd4d1b4"}],"scriptsAfterEngine":[]},"sentry":{"enabled":false},"metrics":{"env":"live","send":true}

Js script

class Slider {
  constructor(rangeElement, valueElement, options) {
    this.rangeElement = rangeElement;
    this.valueElement = valueElement;
    this.options = options;

    // Attach a listener to "change" event
    this.rangeElement.addEventListener("input", this.updateSlider.bind(this));
  }

  // Initialize the slider
  init() {
    this.rangeElement.setAttribute("min", options.min);
    this.rangeElement.setAttribute("max", options.max);
    this.rangeElement.value = options.cur;

    this.updateSlider();
  }

  // Format the money
  asMoney(value) {
    return (
      "$" +
      parseFloat(value).toLocaleString("en-US", { maximumFractionDigits: 2 })
    );
  }

  generateBackground(rangeElement) {
    if (this.rangeElement.value === this.options.min) {
      return;
    }

    let percentage =
      ((this.rangeElement.value - this.options.min) /
        (this.options.max - this.options.min)) *
      100;
    return (
      "background: linear-gradient(to right, #50299c, #7a00ff " +
      percentage +
      "%, #d3edff " +
      percentage +
      "%, #dee1e2 100%)"
    );
  }

  updateSlider(newValue) {
    this.valueElement.innerHTML = this.asMoney(this.rangeElement.value);
    this.rangeElement.style = this.generateBackground(this.rangeElement.value);
  }
}

let rangeElement = document.querySelector('.range [type="range"]');
let valueElement = document.querySelector(".range .range__value span");

let options = {
  min: 2000,
  max: 75000,
  cur: 37500
};

if (rangeElement) {
  let slider = new Slider(rangeElement, valueElement, options);

  slider.init();
}

and i have this html

<div class="container">
  <form class="range">
    <div class="form-group range__slider">
      <input type="range" step="500">
    </div><!--/form-group-->
    <div class="form-group range__value">
      <label>Loan Amount</label>
      <span></span>            
    </div><!--/form-group-->
  </form>
</div><!--/container-->
6

Can you post a project example for people to look at please?

7

https://playcanvas.com/project/952866/overview/testprojectexample

8

The issue here is that scriptjs.js is trying to find HTML elements before they’ve been added to the DOM in ui.js initialize.

The easiest way forward is to have the Slider class in a separate JS file like you have done but move the code that looks for the HTML elements and creates the Slider to ui.js after it’s added the HTML elements to the DOM

Fixed: https://playcanvas.com/project/952871/overview/f-testprojectexample-1

9

Thank you very much @yaustar. Now working.