I am currently working on a project that involves running multiple components, JavaScript files, and elements in a specific order.
First, I include opensheetmusicdisplay.min.js in my index.html file without any issues.
Secondly, I have <div id="xml">
Third, there is xml-loader.js which relies on both the "xml" div and opensheetmusicdisplay.min.js
Here is the content of my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<script rel="preload" src="<%= BASE_URL %>js/osmd/opensheetmusicdisplay.min.js"></script>
</head>
<body>
<div id="xml2">words go here</div>
<div id="app"></div>
</body>
</html>
Below is the JavaScript code I am trying to test:
window.onload = function() {
alert("xx == ", document.getElementById("xml2"));
}
alert("xx2 == ", document.getElementById("xml2"));
alert(JSON.stringify(opensheetmusicdisplay, null, 1));
When I run this, both instances of "xml2" show blanks. However, the opensheetmusicdisplay does display data, indicating it is reading from the source in the head section of index.html.
An error regarding the console was pointed out - TypeError: document.getElementById(...) is null. Additionally, I made an oversight in using the alert function with two arguments which I will address later.
Now let's focus on main.js where various comments outline different ideas:
// vue imports and config import Vue from 'vue' import App from '@/App' import VueRouter from 'vue-router'
Vue.use(VueRouter) Vue.config.productionTip = false
// page imports
import Notation from '@/components/Notation'
import HomePage from '@/components/HomePage'
import { FoundationCSS } from '@/../node_modules/foundation-sites/dist/css/foundation.min.css'
Vue.component('foundation-css', FoundationCSS)
import SideNav from '@/components/SideNav'
Vue.component('side-nav', SideNav);
import * as XmlJs from '@/../public/js/osmd/xml-loader.js'
Vue.component('xml-js', XmlJs)
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/',
components: {
maininfo: HomePage
}
},
{ path: '/chromatic-scales/c-chromatic-scale',
components: {
maininfo: Notation
}
}
]
})
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
I have globally registered XmlJs because it seems to be the only solution that works consistently. It is then embedded in Notation.vue as follows:
<template>
<div>
<div id="xml">
{{ notation.data }}
</div>
<xml-js />
</div>
</template>
<script>
import axios from 'axios'
export default ({
data () {
return {
notation: null,
}
},
mounted () {
axios
.get('http://localhost:3000/chromatic-scales/c-chromatic-scale')
.then(result => (this.notation = result))
}})
</script>
<style scoped></style>
The primary objective lies with xml-loader.js, which retrieves data from <div id="xml"> and processes it to render the desired output. The challenge arises when attempting to wait for the information within {{ notation.data }}
As I navigate through the complexities of vuejs and frontend JavaScript frameworks, I acknowledge that there is room for optimization in the current code structure.