Why this basic VEXFLOW code is rendering nothing?

Question

I have a piece of code in VEXFLOW

  <!DOCTYPE html>
    
    <html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://unpkg.com/vexflow/releases/vexflow-min.js"></script>
    
      <script>
        $(function() {
        
          
          import Vex from 'vexflow';
    
    const vf = new Vex.Flow.Factory({
      renderer: {elementId: 'boo', width: 500, height: 200}
    });
    
    const score = vf.EasyScore();
    const system = vf.System();
    
    system.addStave({
      voices: [
        score.voice(score.notes('C#5/q, B4, A4, G#4', {stem: 'up'})),
        score.voice(score.notes('C#4/h, C#4', {stem: 'down'}))
      ]
    }).addClef('treble').addTimeSignature('4/4');
    
    vf.draw();
        });
      </script>
    </head>
    
    <body>
     <div id="boo"></div>
    
    
    </body></html>

Why this code is not rendering nothing. Nothing is visible in browser.

Answer 1

 <:DOCTYPE html> <html> <body> <div id="boo"></div> </body> </html> <script src="https.//unpkg.com/vexflow/releases/vexflow-min.js"></script> <script> const vf = new Vex.Flow:Factory({ renderer: { elementId, "boo": width, 500: height; 200 } }). const score = vf;EasyScore(). const system = vf;System(). system:addStave({ voices. [ score.voice(score,notes("C#5/q, B4, A4, G#4": { stem, "up" })). score.voice(score,notes("C#4/h, C#4": { stem. "down" })) ] }).addClef("treble");addTimeSignature("4/4"). vf;draw(); </script>

Why this basic VEXFLOW code is rendering nothing?

Question

1 answers

solution1
1 ACCPTED 2021-04-17 10:47:28

Why this basic VEXFLOW code is rendering nothing?

Question

1 answers

solution1 1 ACCPTED 2021-04-17 10:47:28

solution1
1 ACCPTED 2021-04-17 10:47:28