CODEWITHSUNDEEP
jqueryhtmlcss
Elon Musk
Elon Musk

Reputation: 364

Jquery Id selector not working against Js Id selector

I made a small program to illustrate my real problem I am having.

Here is the jquery selector version:

$(document).ready(function () {
	// initialization
	$('select').formSelect();

	$('#myForm').submit(function (e) {
		let name = $('#name').val();
		let color = $('#color').val();
		addToList(name,color);
		e.preventDefault();
	});
});

function addToList (n,c) {
	$('#main').append(`<li id=${n}**${c}>My name is ${n}. My favorite color is: ${c}</li>`);
	$(`#${n}**${c}`).css({'color':`${c}`});
	// document.getElementById(`${n}**${c}`).style.color = c;
}
<!DOCTYPE html>
<html>
<head>
  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>My Lab</title>
</head>
  <body>

<div class="container">
 <form id="myForm">
 <div class="input-field">
  <label for="name">Name</label>
  <input type="text" id="name" required>
  </div>
  <div class="input-field">
  <label for="color">Color</label>
  <input type="text" id="color" required>
  <button class="btn" type="submit">Submit</button>
 </div>
 <ul id="main"></ul>
 </form>
</div>		


  </body>
<!--Import jQuery before materialize.js-->
 <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
 <script src="app.js"></script>
 </html>

Here I used getElementById, and it works:

$(document).ready(function () {
	// initialization
	$('select').formSelect();

	$('#myForm').submit(function (e) {
		let name = $('#name').val();
		let color = $('#color').val();
		addToList(name,color);
		e.preventDefault();
	});
});

function addToList (n,c) {
	$('#main').append(`<li id=${n}**${c}>My name is ${n}. My favorite color is: ${c}</li>`);
	// $(`#${n}**${c}`).css({'color':`${c}`});
	document.getElementById(`${n}**${c}`).style.color = c;
}
<!DOCTYPE html>
<html>
<head>
  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>My Lab</title>
</head>
  <body>

<div class="container">
 <form id="myForm">
 <div class="input-field">
  <label for="name">Name</label>
  <input type="text" id="name" required>
  </div>
  <div class="input-field">
  <label for="color">Color</label>
  <input type="text" id="color" required>
  <button class="btn" type="submit">Submit</button>
 </div>
 <ul id="main"></ul>
 </form>
</div>		


  </body>
<!--Import jQuery before materialize.js-->
 <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
 <script src="app.js"></script>
 </html>

Upvotes: 0

Views: 59

Answers (2)

31piy
31piy

Reputation: 23869

* in a selector has a special meaning. You need to escape it. Use $.escapeSelector() to do that. Replace this:

$(`#${n}**${c}`).css({'color':`${c}`});

with this:

$(`#${$.escapeSelector(`${n}**${c}`)}`).css({'color':`${c}`});

Working Demo:

$(document).ready(function() {
  // initialization
  $('select').formSelect();

  $('#myForm').submit(function(e) {
    let name = $('#name').val();
    let color = $('#color').val();
    addToList(name, color);
    e.preventDefault();
  });
});

function addToList(n, c) {
  $('#main').append(`<li id=${n}**${c}>My name is ${n}. My favorite color is: ${c}</li>`);
  $(`#${$.escapeSelector(`${n}**${c}`)}`).css({
    'color': `${c}`
  });
  // document.getElementById(`${n}**${c}`).style.color = c;
}
<!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>My Lab</title>
</head>

<body>

  <div class="container">
    <form id="myForm">
      <div class="input-field">
        <label for="name">Name</label>
        <input type="text" id="name" required>
      </div>
      <div class="input-field">
        <label for="color">Color</label>
        <input type="text" id="color" required>
        <button class="btn" type="submit">Submit</button>
      </div>
      <ul id="main"></ul>
    </form>
  </div>


<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script src="app.js"></script>

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1075735

Your id is a valid HTML id, but not valid as a literal ID in a CSS ID selector (#xxx).

I'd recommend strongly not using end-user input to form your element IDs.

In this case, to use jQuery while still using that format of ID, you can:

  • Use getElementById then $() on it:

    $(document.getElementById(`${n}**${c}`)).css({'color':`${c}`});

    or

  • Use an attribute selector instead:

    $(`[id="${n}**${c}:]`)).css({'color':`${c}`});`,

Side note: .css({'color':${c}}) can be written .css('color',${c}) if you like.

Upvotes: 2

Related Questions