W3C Validation issue : how to fix

JavaScript
1

Hi, I know the problem but I don’t know how to fix this. This is JQuery image slider and I used digit as my ID attribute but unfortunately, W3C invalid returns because:

Line 222, Column 18: value of attribute “id” invalid: “1” cannot start a name

In this case, I know that I cannot use digit as my id but the code makes me to use that id… please give me some advice on this thank you


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
  <script type="text/javascript">

	function Slider(){
	
		$(".slider #1").show("fade", 500);
		$(".slider #1").delay(5500).hide("slide", {direction: 'left'}, 500);
		
		var sc = $(".slider img").size();
		var count = 2;
		
		setInterval(function (){
			$(".slider #"+count).show("slide", {direction: 'right'}, 500);
			$(".slider #"+count).delay(5500).hide("slide", {direction: 'left'}, 500);
			
			if(count == sc){
				count = 1;
			}else{
				count = count + 1;
			}
		}, 6500);
	}
  </script>

  <div class="slider">
        <img id="1" src="images/slide0.png" border="0" alt="error" />
        <img id="2" src="images/slide1.png" border="0" alt="error" />
  </div>
2

Hi u4722839. Welcome to the forums. :slight_smile:

I know that I cannot use digit as my id but the code makes me to use that id…

Heh heh … Just change the code. :slight_smile:

Change the ID in the JS file to anything, such as #one, and then change the HTML too.

Edit:

O, I looked at the code a bit more closely and see what you mean. Maybe try something like:

$(“.slider #s1”).show(“fade”, 500);
$(“.slider #s1”).delay(5500).hide(“slide”, {direction: ‘left’}, 500);

…

$(“.slider #s”+count).show(“slide”, {direction: ‘right’}, 500);
$(“.slider #s”+count).delay(5500).hide(“slide”, {direction: ‘left’}, 500);

…

<img id=“s1” src=“images/slide0.png” border=“0” alt=“error” />
<img id=“s2” src=“images/slide1.png” border=“0” alt=“error” />

Mind you, not validating doesn’t mean it won’t work … although it’s better not to break rules.

3

Thank you for your reply! I am quite new to JavaScript. Have a nice day :slight_smile:

4

Did it work? I’m no expert with JS, so I may be blowing hot air there. :slight_smile: