Modifier fontStyle à l'intérieur d'un string

Bonjour,

Tu ne peux pas appliquer de "style" à une string.

Il faut la mettre dans un SPAN et appliquer le style sur cet élément html.

Merci Jordane,

Je te mets les codes html et javascript concernant cette cha^ne de caratères :

<!-- Audio -->	
		<main class="music-container">
			<div class="music-progress">
				<div class="progressTimes">
					<p class="progres"><i></i></p>
					<div class="times">
						<p>0:00</p>
						<p>0:00</p>
					</div>
				</div>
			</div>
			<div class="controller">
				<div id="volume" class="item">
					<i class="fa-solid fa-volume-high"></i>
				</div>
				<div id="prev" class="item">
					<i class="fa-solid fa-backward"></i>
				</div>
				<div id="play" class="item">
					<i class="fa-solid fa-circle-play"></i>
				</div>
				<div id="next" class="item">
					<i class="fa-solid fa-forward"></i>
				</div>
				<div id="stop" class="item">
					<i class="fa-solid fa-stop"></i>
				</div>
			</div>
			<div class="marquee">
				<p id="artist"><span style="font-style: normal;" id="number"></span></p>
			</div>
		</main>	

const audioProgress = document.querySelector(".progres i");
const audioProgressTimes = document.querySelector(".progressTimes");
const artist = document.querySelector("#artist");
const [audioCurrentTime, audioDurationTime] = document.querySelector(".times").children;
const [volume, prev, play, next, stop] = document.querySelectorAll(".item");
const number = document.getElementById('number');

const audios = [
	'audio/whiterShade.mp3',
	'audio/sardou.mp3',
	'audio/brassens.mp3',
	'audio/nougaro.mp3',
	'audio/reggiani.mp3',
	'audio/Emily-Linge.mp3',
	'audio/belafonte.mp3'
];

const artists = [
	'Emily Linge ~ a whiter shade of pale',
	'Michel Sardou ~ ses meilleurs chansons',
	'Georges Brassens ~ ses meilleurs chansons',
	'Claude Nougaro ~ ses meilleurs chansons',
	'Serge Reggiani ~ ses meilleurs chansons',
	'Emily Linge ~ ses meilleures reprises',
	'Harry Belafonte ~ ses meilleurs chansons'
];

let numero = ['①', '⓶', '⓷', '⓸', '⓹', '⓺', '⑦'];

let interval;
let countMusic = 0;
let iconArray = [];
let audio = new Audio(audios[countMusic]);

const audioPlay = () => {
	let numbe = numero[countMusic];
	number = number.big();
	number = number.fontcolor('0000FF');
	artist.innerHTML = '♬ ~ ' + number  + ' ~ ' + artists[countMusic] + ' ♬';
	if (audio.paused) {
		audio.play();
		play.innerHTML = '<i class="fa-solid fa-pause"></i>';
		musicInterval();
	} else {
		audio.pause();
		play.innerHTML = '<i class="fa-solid fa-circle-play"></i>';
		clearInterval(interval);
	}
}

const audioStop = () => {
	audioProgressTimes.style.display = 'block';
	if (!audio.paused) {
		audio.pause();
		play.innerHTML = '<i class="fa-solid fa-circle-play"></i>';
		clearInterval(interval);
	}
		audio.currentTime = 0;
		timeFormatter();
}

const audioNext = () => {
	audioProgressTimes.style.display = 'block';
	if (!audio.paused) {
		audio.pause();
	}
	if (audios.length - 1 > countMusic) {
		++countMusic;
	} else {
		countMusic = 0;
	}
	audio = new Audio(audios[countMusic]);
	audioPlay();
	musicInterval();
}

const audioPrev = () => {
	audioProgressTimes.style.display = 'block';
	if (!audio.paused) {
		audio.pause();
	}
	if (0 < countMusic) {
		--countMusic;
	} else {
		countMusic = audios.lenght - 1;
	}
	audio = new Audio(audios[countMusic]);
	audioPlay();
	musicInterval();
}

const audioIsMuted = () => {
	audioProgressTimes.style.display = 'block'; 
	if (audio.volume > 0) {
		audio.volume = 0;
		volume.innerHTML = '<i class="fa-solid fa-volume-xmark"></i>';
	} else {
		audio.volume = 1;
		volume.innerHTML = '<i class="fa-solid fa-volume-high"></i>';
	}
}

const musicInterval = () => {
	clearInterval(interval);
	interval = setInterval( () => {
		timeFormatter();
	}, 1000);
}

const timeFormatter = () => {
	audioCurrentTime.textContent = convertCurrent(audio.currentTime);
	audioDurationTime.textContent = convertHMS(audio.duration);
	audioProgress.style.width = ((audio.currentTime / audio.duration) * 100) + '%';

	if (audio.currentTime === audio.duration) {
		audioNext();
	}
}

const convertCurrent = (value) => {
	if (audio.duration > 3600) {
		let hours   = Math.floor(value / 3600); 
	  	let minutes = Math.floor(value % 3600 / 60); 
	  	let seconds = Math.floor(value % 3600 % 60);

	  if (minutes < 10) {minutes = "0"+minutes;}
	  if (seconds < 10) {seconds = "0"+seconds;}

	  return hours + ':' + minutes + ':' + seconds;
	} else {
		minutes = parseInt(value / 60);
		seconds = parseInt(value % 60);

		// if (minutes < 10) {minutes = "0"+minutes;}
		if (seconds < 10) {seconds = "0"+seconds;}

		return minutes + ':' + seconds;
	}
}

const convertHMS = (value) => {
    if (value < 3600) {
    	let minutes = parseInt(value / 60);
    	let seconds = parseInt(value % 60);
    	// if (minutes < 10) {minutes = '0' + minutes}
    	if (seconds < 10) {seconds = '0' + seconds}

    	return minutes + ':' + seconds;
    } else {
	    let hours   = Math.floor(value / 3600); 
	    let minutes = Math.floor(value % 3600 / 60); 
	    let seconds = Math.floor(value % 3600 % 60);

	    if (minutes < 10) {minutes = "0"+minutes;}
	    if (seconds < 10) {seconds = "0"+seconds;}

	    return hours + ':' + minutes + ':' + seconds; 
    }
}

play.addEventListener('click', audioPlay);
stop.addEventListener('click', audioStop);
next.addEventListener('click', audioNext);
prev.addEventListener('click', audioPrev);
volume.addEventListener('click', audioIsMuted);

La chaîne est en italique dans le CSS et je voudrais mettre le numero (number) en normal.

As tu une idée comment faire ?

Meci beaucoip,

Très cordialement

Bonjour Jordane,

J'ai trouvé, voilà ce que j'ai fait :

const number = document.getElementById('number');

const audioPlay = () => {
	number.innerHTML = '<span style="font-style: normal;">' + 
    numero[countMusic].fontcolor('FF0000').big() + '</span>';
	artist.innerHTML = '♬ ~ ' + number.innerHTML  + ' ~ ' + artists[countMusic] + ' ♬';
	if (audio.paused) {
		audio.play();
		play.innerHTML = '<i class="fa-solid fa-pause"></i>';
		musicInterval();
	} else {
		audio.pause();
		play.innerHTML = '<i class="fa-solid fa-circle-play"></i>';
		clearInterval(interval);
	}
}

Encore merci de ton aide.

Effectivement,

j'aurais dû procéder comme ça, cela marche en mettant le style au niveau du span.

Tu as raison, je vais le modifier.

Merci encore pour ton aide.

Bonjour Jordane,

J'ai essayé de faire comme tu l'as suggéré, apparemment, ça ne fonctionne pas.

Comment procèderais tu ?

Cordialement

Bonjour Jordane,

Ce que tu m'as conseillé de faire <span class="icon-num"> marche très bien, ce qui ne pouvait pas marcher est que je m'emmêlais dans les noms de classe que je donnais.

Voici les code sources Js et CSS :

let numero = ['<i class="fa-solid circle fa-1"></i>', '<i class="fa-solid circle fa-2"></i>', 
			  '<i class="fa-solid circle fa-3"></i>', '<i class="fa-solid circle fa-4"></i>', 
			  '<i class="fa-solid circle fa-5"></i>', '<i class="fa-solid circle fa-6"></i>', 
			  '<i class="fa-solid circle fa-7"></i>'];

let interval;
let countMusic = 0;
let iconArray = [];
let audio = new Audio(audios[countMusic]);

const audioPlay = () => {
	number.innerText = numero[countMusic];
	artist.innerHTML = '♬ ~ <span class="icon-num">' +  number.innerText + '</span> ' + artists[countMusic] + ' ~ ♬';
	if (audio.paused) {
		audio.play();
		play.innerHTML = '<i class="fa-solid fa-pause"></i>';
		musicInterval();
	} else {
		audio.pause();
		play.innerHTML = '<i class="fa-solid fa-circle-play"></i>';
		clearInterval(interval);
	}
}

  .icon-num {
   	font-style: normal;
  	font-size: 20px;
  	color: #f00;
  }
}
.circle {
	padding: 2px;
	width: 24px;
	height: 24px;
	text-align: center;
	border: 1px solid #f00;
	font-weight: 300;
	border-radius: 100%;
}

Et encore mille mercis pour ton aide.

Je clos et je le mets comme résolu