TA貢獻1719條經驗 獲得超6個贊
這是一個允許用戶上下切換數字輸入的選項：
<input type="number" id="fraction-1"/>
<input type="number" id="fraction-2"/>
Current Signature:
<div id="current-sig"></div>
然后在你的javascript中...
// Get the select form element
const FRACT_1 = 'fract-1'
const FRACT_2 = 'fract-2'
const fract1 = document.querySelector(`#${FRACT_1}`)
const fract2 = document.querySelector(`#${FRACT_2}`)
const currentSigDiv = document.querySelector('#current-sig')
let currentSignature = '4/4'
const changeSignatureByFraction = ({target}) => {
if(target.id === FRACT_1)) {
currentSignature = `${target.value}${currentSignature.substring(1)}`
stave.addClef("treble").addTimeSignature(currentSignature)
currentSigDiv.innerHTML = currentSignature
} else {
currentSignature = `${currentSignature.slice(0, -1)}${target.value}`
stave.addClef("treble").addTimeSignature(currentSignature)
currentSigDiv.innerHTML = currentSignature
}
}
// Listen for a change event
fract1.addEventListener('change', changeSignatureByFraction)
fract2.addEventListener('change', changeSignatureByFraction)
currentSigDiv.innerHTML = currentSignature
TA貢獻1797條經驗 獲得超6個贊
創建一個包含可能分數的下拉列表。將其值查詢到變量中。將變量作為addTimeSignature()方法的參數傳遞。
HTML：
<select id="TimeSignatureSelect">
<option value='1/4'>1/4</option>
<option value='2/4'>2/4</option>
<option value='3/4'>3/4</option>
<option value='4/4'>4/4</option>
</select>
JS：
const timeSig = document.getElementByID('TimeSignatureSelect').value;
stave.addClef("treble").addTimeSignature(timeSig);
舉報