Javascript 如何从函数或变量创建具有src属性的id？_Javascript_Html

Javascript 如何从函数或变量创建具有src属性的id？

javascript html

Javascript 如何从函数或变量创建具有src属性的id？,javascript,html,Javascript,Html,我有一个通用的javascript函数，用于根据PM2.5值获取源图像位置。以下代码不起作用： <!DOCTYPE html> <html> <body> <p>Finding the aqiicon.</p> <p id="#aqiicono"></p> <script> var aqiicon = ""; var pm25o = 12.0;

我有一个通用的javascript函数，用于根据PM2.5值获取源图像位置。以下代码不起作用：

<!DOCTYPE html>
<html>
  <body>
    <p>Finding the aqiicon.</p>
    <p id="#aqiicono"></p>

    <script>
      var aqiicon = "";
      var pm25o = 12.0;
      // aqiicon = pm25toicon(pm25o);
      $("#aqiicono").attr("src", pm25toicon(pm25o));
    </script>

    <script>
      function pm25toicon(pm25) {
        if (pm25 < 12.1) {
          return "'img/aqi1.png'";
        } else if (pm25 < 35.5) {
          return "'img/aqi2.png'";
        } else if (pm25 < 55.5) {
          return "'img/aqi3.png'";
        } else if (pm25 < 150.5) {
          return "'img/aqi4.png'";
        } else if (pm25 < 250.5) {
          return "'img/aqi5.png'";
        } else {
          return "'img/aqi6.png'";
        }
      }
      // document.getElementById("demo").innerHTML = pm25toicon(300);
    </script>
  </body>
</html>

感谢您的建议。

您的脚本中有一些错误，这里有一个建议：

首先，当页面正确加载Jquery时，应该调用函数
第二你不应该放任何返回“”，否则，你的img会像：

第三个您正在尝试将图像加载到

中，将其编辑为

img

这是密码

找到aqiicon


var aqiicon=“”；
var pm25o=12.0；
功能pm25toicon（pm25）{
如果（pm25<12.1）{
返回“img/aqi1.png”；
}否则，如果（pm25<35.5）{
返回“img/aqi2.png”；
}否则，如果（pm25<55.5）{
返回“img/aqi3.png”；
}否则，如果（pm25<150.5）{
返回“img/aqi4.png”；
}否则，如果（pm25<250.5）{
返回“img/aqi5.png”；
}否则{
返回“img/aqi6.png”；
}
}
//加载文档时替换src
$（文档）.ready（函数（）{
$（“aqiicono”）.attr（“src”，pm25toicon（pm25o））；
});

将

更改为


找到aqiicon

再次感谢。以下是你们两位建议的工作代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>

<p>Finding the aqiicon.</p>
<img id="aqiicono" />


<script>
function pm25toicon(pm25) {
if (pm25 < 12.1)
{return 'img/aqi1.png';}
else if (pm25 < 35.5)
{return 'img/aqi2.png';}
else if (pm25 < 55.5)
{return 'img/aqi3.png';}
else if (pm25 < 150.5)
{return 'img/aqi4.png';}
else if (pm25 < 250.5)
{return 'img/aqi5.png';}
else
{return 'img/aqi6.png';}
} 

$('#aqiicono').attr('src', pm25toicon(pm25o));
</script>


</body>
</html>


找到aqiicon

非常感谢。我现在让它工作了。工作代码现在是：

<script>
  var aqiicon = "";
  var pm25o = 12.0;

  function pm25toicon(pm25) {
    if (pm25 < 12.1) {
      return "img/aqi1.png";
    } else if (pm25 < 35.5) {
      return "img/aqi2.png";
    } else if (pm25 < 55.5) {
      return "img/aqi3.png";
    } else if (pm25 < 150.5) {
      return "img/aqi4.png";
    } else if (pm25 < 250.5) {
      return "img/aqi5.png";
    } else {
      return "img/aqi6.png";
    }
  }

  // Replace src when document is loaded
  $(document).ready(function() {
    $("#aqiicono").attr("src", pm25toicon(pm25o));
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>

<p>Finding the aqiicon.</p>
<img id="aqiicono" />


<script>
function pm25toicon(pm25) {
if (pm25 < 12.1)
{return 'img/aqi1.png';}
else if (pm25 < 35.5)
{return 'img/aqi2.png';}
else if (pm25 < 55.5)
{return 'img/aqi3.png';}
else if (pm25 < 150.5)
{return 'img/aqi4.png';}
else if (pm25 < 250.5)
{return 'img/aqi5.png';}
else
{return 'img/aqi6.png';}
} 

$('#aqiicono').attr('src', pm25toicon(pm25o));
</script>


</body>
</html>