访问自定义 CSS 属性

时间:2021-07-02 00:30:08

标签: javascript

我无法访问为元素设置的自定义属性。我的日志语句显示所有值都存在,我的 current_button 定义是 else 语句之后的间接引用有问题吗?

function setAnswers(answer_object) {
    answer_length = Object.entries(answer_object).length
    console.log('setAnswers answer_length is ', answer_length)
    if (answer_length == 2) {
        let answer_1 = Object.keys(answer_object)[0]
        let result_1 = answer_object[0]
        console.log('setAnswers setting left_button to ', answer_1, ' result is ', result_1)
        left_button.style.visibility = 'visible'
        left_button.innerText = Object.keys(answer_object)[0]
        left_button.setAttribute('result', answer_object[0])
        left_button.setAttribute('function', 'select_answer')
        let answer_2 = Object.keys(answer_object)[1]
        let result_2 = answer_object[1]
        console.log('setAnswers setting right_button to ', answer_2, ' result is ', result_2)
        right_button.style.visibility = 'visible'
        right_button.innerText = Object.keys(answer_object)[0]
        right_button.setAttribute('result', answer_object[0])
        right_button.setAttribute('function', 'select_answer')
    } else {
        left_button.style.visibility = 'hidden'
        right_button.style.visibility = 'hidden'
        answers_display.style.display = 'grid'
        answer_count = 1
        let current_button
        for (const [key, value] of Object.entries(answer_object)) {
            let answer = key
            let result = value
            console.log('setAnswers setting answer ', (answer_count + 1), ' to ', answer, ' result is ', result)
            if (answer_count === 1) {
                current_button = answer_button_1
            } else if (answer_count === 2) {
                current_button = answer_button_2
            } else if (answer_count === 3) {
                current_button = answer_button_3
            } else if (answer_count === 4) {
                current_button = answer_button_4
            }
            current_button.innerText = answer
            current_button.setAttribute('result', result)
            current_button.setAttribute('function', 'select_answer')
            answer_count++
        }
    }
}

我尝试将我的 4 个按钮放入一个数组中,以便我可以使用 answer_button_array[answer_count-1] 访问它们,但是这些值没有被传递。我不确定如何确定问题是我引用元素的方式,还是我使用错误的语法来访问属性。

这是我用来访问属性的函数,innerText 在此函数中正确显示,但属性返回未定义。

如果问题是我无法通过将元素存储为另一个变量来操作它,是否有替代解决方案以类似于访问数组索引的方式操作元素,以便我可以避免所有这些 if 语句?

function answerButton1Pressed() {
    console.log('answerButton1Pressed')
    if (wait_for_input) {
        console.log('answerButton1Pressed wait_for_input is true')
        wait_for_input = false
        let answer = answer_button_1.innerText
        let result = answer_button_1.dataset.result
        let function_string = answer_button_1.dataset.function
        console.log('answerButton1Pressed answer is ', answer, ' result is ', result, ' function_string is ', function_string)
        if (function_string === 'select_answer') {
            selectAnswer(answer, result)
        }
    }
}

0 个答案:

没有答案