CODEWITHSUNDEEP
javascripthtmlcss
David
David

Reputation: 4271

Css is not getting Applied for background image

I have one html select with options where I am selecting value from option and passing this value to the div. This div I am passing through my AutoVal javascript value where I am creating a Inputfield. Everything is creating and working as I want and css is also getting apllied I believe but my Backgroungd image is not getting apply here. Can anybody suggest me what I am missing. 

AutoVal = function(args) {
  debugger;
  var divID = args.divID;
  var div = document.getElementById(divID);
  var input = '<input type="text" id="myInput" onclick="myFunction()" title="Type in a name">';
  div.innerHTML = input;
}
#myInput {
  background-image: url('Drop.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 30%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}
<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>PC-AutoCombo </title>
  <link rel="stylesheet" type="text/css" href="css/AutoVal.css">
  <script src="js/PC.AutoVal.js"></script>
</head>

<body>
  <select id="mySelect" onchange="myFunction()">
          <option value="Val1">Val1</option>
          <option value="Val2">Val2</option>
       </select>
  <div id="Val" style="position: relative;"></div>
</body>
<script>
  function myFunction() {
    var val = document.getElementById("mySelect").value;
    var myVal = new AutoVal({
      "url": "data.json",
      "divID": "Val",
    });
    switch (val) {
      case 'Val1':
        break;
      case 'Val2 :
      var myVal = new AutoVal({
        "url": "data.json",
        "divID": "AutoVal",
      });
      break;
    }
  }

Upvotes: 1

Views: 57

Answers (1)

David R
David R

Reputation: 15639

You are missing an apostrophe in your case 'Val2 : declaration.

Adding that seems to be fixing the issue, Here is the working demo: https://jsfiddle.net/v2o2nmpj/

Hope this helps!.

Upvotes: 2

Related Questions