为什么我的divs值未定义？

Question

I'm creating global div elements and assigning them all a value to represent their day of the week.

var daysOfWeek = ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun']
var daysOfWeekNum = [1,2,3,4,5,6,0]

var dayOfWeek = myDiv.append('div')
    .classed('dayOfWeek', true)

var dayLabels = daysOfWeek.forEach(function(DoW, DoWN){
   dayOfWeek.append('div')
        .attr("value", function(){ return parseInt((DoW == 'Sun') ? DoWN = 0 : DoWN = DoWN + 1)})
        .text(DoW)
})

Then later on down in the script, I run this.

d3.selectAll('div.dayOfWeek')
    .on('click', function(){
        console.log(this)
        console.log(this.value)
    })

So when I run console.log(this) the output looks like this:

<div class = "dayOfWeek" value="4">Thurs</div>

My problem is in the console.log(this.value) . I don't get a value when I try to log it. It just gives me undefined . Am I missing something obvious?

Answer 1

Divs don't have a value attribute in HTML, and the value property doesn't map on to the non-existent attribute in the DOM.

If you set the attribute, then you have to read the attribute to get the data base.

Since divs don't have a value attribute, you shouldn't be setting one though. Use data-* attributes if you want to add custom data to an element.

 document.querySelector('div').dataset.value = 1234; alert(document.querySelector('div').dataset.value); 

 <div>My div</div>