fretboard | music theory app for visualizing chords

The problem

I'm trying to use https://github.com/moonwave99/fretboard.js in my Vue project. I try to import the module in a component as follows:

I have a guitar fret board image and have dots that I have overlay-ed on top of them. Unfortunately when I scroll the image the dots don't move with it. Sorry it is so long. It's the only way I could figure out how to implement dots on the image. If anyone has any ideas on a better way to do the images also, I'm all ears.

I'm creating a game to guess guitar notes on a fretboard.

I have the game on a child component (GameAreaClass) and I pass back game data to the parent using a callback. In the parent (App) I'm will be calculating score and loading this to the app state and loading score to new div. This is working. Although I need to build out the score rule properly.

What I need is a way to re-mount the child GameAreaClass to in effect start a new game immediately after the callback has been processed.

I need to load the fretboard through an NPM library hence DOM additions are handled in ComponentDidMount. It's the GenerateFret method I actually need to re-run. What's the best way to do this?

Index.js

I'm using an NPM package that draws a fretboard using D3 (https://github.com/txels/fretboard) .It outputs a div with SVG. I have it working with a normal HTML page but if I try and load it to a React component with code below it gets appended to end of page rather than in div where I have the expression.

Any ideas how I get this generated div in the component div?

I'm working on an application which, to make my life easier, requires a numeric converter for notes into frequencies that do a certain number of notes per second, including chords.

I found this article which highlighted the frequencies of each note, which manually blended (with pyaudio) to make my own rendition of Smoke On The Water using the mapped sequence from the article for each note.

This would work, and I could create chords by creating parallel processes, though I have no way of converting a note or tab number into a specific pitch. Most of my data is in the form of:

I try to do simple code for guessing notes by ear. I have tabs with several empty input fields and you need to put right numbers in these fields according to certain melody (for guitar fretboard) . One button shows first note, another button checks whether you put right or wrong number and depend on it approves or erase your number.

I know how to check every input field using its id's but can i do it such way that when i push 2nd button it get value from selected input and compare it to its placeholder or value attribute?

It is my codepen https://codepen.io/fukenist/pen/BxJRwW Script part

I am trying to conditionally render a chunk of HTML inside a nested v-for loop.

In the nested v-for I'm already binding a class to each element, that satisfies a certain condition.

So the class 'fret-mark-1' is added to the div if stringNumber === 0 (the first rendered element in the parent v-for loop) and the fret-number is found in the fretMark1 array: fretMark1.indexOf(fret) >= 0

I am trying to get the 'src' of the image of a product in Shopify with rails.

I do this in the controller:

I just want to know how to put an alert box using javascript and asp.net. Basically I have created a webpage where the admin will fill up a form, and then after clicking the submit button, there should be an alert box that will popup with a message that says upload successful or upload failed.

I tried doing it with this code(I only included the javascript code and the asp submit button):