将第一个字符转换为大写时出错

Question

I want to convert the first characters of all the span tags to upper case but i am getting an error: TypeError: a[0].toUpperCase is not a function.

 <div id="test"> <h1> <span>test</span> <span>test</span> <span>test</span> </h1> </div> 

 var x = document.getElementById("test"); function capital(a) { return a[0].toUpperCase() + a.slice(1); } 

 var test=x.getElementsByTagName("span"); var b=capital(test) console.log(b) 

Answer 1

getElementsByTagName("span") return a HTMLCollection . So if you want to use toUpperCase() , you need to loop through it and call innerText .

 var x = document.getElementsByTagName("span"); console.log(x) function capital(a){ return a[0].toUpperCase() + a.slice(1); } for(el of x) { el.innerText = capital(el.innerText); } 

 <div id="test"> <h1> <span>test</span> <span>test</span> <span>test</span> </h1> </div> 

Answer 2

You should use text-transform css property:

 span { text-transform: capitalize; } 

 <div id="test"> <h1> <span>test</span> <span>test</span> <span>test</span> </h1> </div> 

Answer 3

you can do it by applying querySelecterAll on the span tag and then convert the textcontent to the uppercase

 let myVal = document.querySelectorAll('span') let arr=Object.values(myVal); arr.map(m=>{ let c=m.textContent; let text=c.charAt(0).toUpperCase() +c .slice(1) m.textContent=text; } ) 

 <div id="test"> <h1> <span>test1</span> <span>test2</span> <span>test3</span> </h1> </div> 

Answer 4

your were trying to convert element to uppercase, you need to get the text form the DOM then convert it. Using innerHTML or textContent to get text from the element will solve your problem.

Here we go

 let x = document.getElementById('test'); // your main element let span = x.getElementsByTagName('SPAN'); // all span element within x for( let char of span ) { // you should Add innerHTML in order to get the text console.log(char.innerHTML[0].toUpperCase() + '' + char.innerHTML.slice(1)); } 

 <div id="test"> <h1> <span>test</span> <span>test</span> <span>test</span> </h1> </div> 

Best practice to wrap the console each time when your write a single line code!

Cheer you!