What steps should I take for the vexflow codes to be shown on the page

[Julia Andriessan]

Hello everyone! I'm a newbie of Vexflow, and I'm stuck at incorporating the Vexflow codes into one of my HTML/JS/CSS project. So I put the Vexflow .js file into my html file, under the first <script> tag, while typing my code of Vexflow in another Javascript file, the abc.js file, which is put in the same folder as the .html one. However, when I test my html file in my browser, there are Uncaught TypeError that "vf.system is not a function". I'd like to ask what steps have I missed, such that I cannot work with the Vexflow library?

Thank you very much!

Javascript:

//

const { Factory } = Vex.Flow;
const vf = new Factory({ renderer: { elementId: 'image' } });
const vfscore = vf.EasyScore();

window.onload = fetchImg();

function fetchImg() {
  d = "(C#3 D5 G#5)/w";
  e = "(Bb4 D5 G#5)/w";

  vf
    .system()
    .addStave({
      voices: [
        score.voice(score.notes(d))
      ],
    })
    .addClef('treble');

    vf
      .system()
      .addStave({
        voices: [
          score.voice(score.notes(e))
        ],
      })
      .addClef('bass');

    vf.addConnector();
    vf.draw();
}

//

HTML: 

// 

<div id="image"></div>
<script src="https://cdn.jsdelivr.net/npm/vexflow/build/cjs/vexflow.js"></script>
<script src="abc.js"></script>

//

[Bernhard Feiten]

Hi,

may be the declaration is missing. 

const { Factory, EasyScore, System } = Vex.Flow;
...
const system = vf.System();
...

Best regards,

Bernhard

--
--
You received this message because you are subscribed to the Google
Groups "vexflow" group.
To post to this group, send email to vex...@googlegroups.com
To unsubscribe from this group, send email to
vexflow+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/vexflow?hl=en

---
You received this message because you are subscribed to the Google Groups "vexflow" group.
To unsubscribe from this group and stop receiving emails from it, send an email to vexflow+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/vexflow/126531ed-c37e-401c-9d8c-8c045e2aeb7en%40googlegroups.com.

[Earl Brown]

Hi, Julia -

I know very little of Vexflow, so I can't point you to a specific answer, but I might be able to help you figure it out.

There are a few tools that might help you in what you're working on. 

First - do you know about the developer tools in the browser?  Hit F12 or "More Tools -> Developer Tools" (in Chrome) - there is a debugger and a console that gives  more information about what's happening.  (Maybe you already know about that and it's where you're seeing the type errors).

The other tool that I've recently become a fan of is http://codesandbox.io - it will do automatic updating as you type, so it's a LOT faster to do trial-and-error.

I hope that helps!

[Earl Brown]

Oh - I just saw what the issue actually is -

System is title case, you're using lower case.  vf.System().addStave(...) not vf.system().addStave()

On 4/4/2023 6:33 AM, Julia Andriessan wrote:

[Rodrigo Vilar]

Hi,

there were several errors. I recommend to use jsfiddle, in the link you get a working version of your code

https://jsfiddle.net/jhd2t0p6/

[Rodrigo Vilar]

Sorry link was wrong, this one should be right

https://jsfiddle.net/jhd2t0p6/1/

[la mà de guido]

ask to chatGPT. it show code

Llorenç Balsach

Missatge de Julia Andriessan <juland...@gmail.com> del dia dc., 5 d’abr. 2023 a les 5:49:

Sorry guys! I shall provide you my current codes for the problem. Thanks a lot of taking a look at my codes.

Javascript:

//

const { Factory } = Vex.Flow;

const vf = new Factory({ renderer: { elementId: 'image', width: 300, height: 150 } });

const vfscore = vf.EasyScore();

const system = vf.System();

window.onload = fetchImg();

function fetchImg() {

d = "(C#3 D5 G#5)/w";

e = "(Bb4 D5 G#5)/w";

system.addStave({

voices: [

score.voice(score.notes(d))

],

})

.addClef('treble');

system.addStave({

voices: [

score.voice(score.notes(e))

],

})

.addClef('bass');

system.addConnector();

vf.draw();

}

//

HTML:

//

<div id="image"></div>

<script src="https://unpkg.com/vex...@4.1.0/build/cjs/vexflow-debug.js"></script>

<script src="abc.js"></script>

//

On Wednesday, April 5, 2023 at 10:32:57 AM UTC+8 Julia Andriessan wrote:

Thank you all for helping me out! I've made some amendments according to the last message, which is the code from the jsfiddle. I tried once again on my own browser, but there is still an Uncaught TypeError. This time it says the "score.notes is not a function". I'm sorry to bother you guys again for the reason behind this error. What am I missing for this error? 

Thank you once again!

To view this discussion on the web visit https://groups.google.com/d/msgid/vexflow/b167ebaf-702f-41c0-a5cd-f45523d7d0d8n%40googlegroups.com.