为什么在我的JavaScript代码中图片没有显示?

huangapple go评论63阅读模式
英文:

Why isn't the image displaying in my JavaScript code?

问题

我把图片添加到了imageshown文件夹,但仍然无法在网页上查看图片。
亲爱的朋友们,请帮助我,我根据显示的汽车添加了条件来显示图片,但即使尝试了我在这里找到的其他方法,它也不起作用。

<img id='img' src=imageshown>

我想要看到一张图片,但图片就是不显示,如何修复这个问题,有人可以帮忙吗!

英文:

i added the image in the imageshown folder and still im unable to view the image on the webpage.
help me my dear friends i added conditions to display image according to the car shown.but it doesnt work even after trying other ways to which i found here.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

/* this is an event */
//alert(&#39;Im Annoying&#39;);
var username = prompt(&quot;Enter Your Name&quot;);
var car = [&quot;Bmw&quot;, &quot;Mercedes&quot;, &quot;Koenigsegg&quot;];
var randomNumber = Math.floor(Math.random() * car.length);
var randcar = car[randomNumber]
if (username === &quot;Nilesh&quot;) {
  document.write(&quot;&lt;h1&gt;Hello &quot; + username + &quot; you won a &quot; + randcar + &quot;!&lt;/h1&gt;&quot;);
  if (randcar === &quot;Bmw&quot;) {
    var imageshown = &quot;Koenigsegg.jpg&quot;
  } else if (randcar === &quot;Mercedes&quot;) {
    var imageshown = &quot;Koenigsegg.jpg&quot;
  } else {
    var imageshown = &quot;Koenigsegg.jpg&quot;
  }
} else if (username === &quot;Chris&quot;) {
  document.write(&quot;&lt;h2&gt;Hey &quot; + username + &quot; You Won A &quot; + randcar + &quot;!&lt;/h2&gt;&quot;);
  if (randcar === &quot;Bmw&quot;) {
    var imageshown = &quot;Koenigsegg.jpg&quot;
  } else if (randcar === &quot;Mercedes&quot;) {
    var imageshown = &quot;Koenigsegg.jpg&quot;
  } else {
    var imageshown = &quot;Koenigsegg.jpg&quot;
  }
} else {
  document.write(&quot;&lt;h3&gt;&quot; + username + &quot; Go Cry On Your Mom&#39;s Lap &#129315;!&lt;/h3&gt;&quot;);
  var imageshown = &quot;Koenigsegg.jpg&quot;
}
document.getElementById(&#39;img&#39;).src = imageshown;

<!-- language: lang-css -->

/* Basic CSS comment */

body {
  background: beige;
  color: white;
  width: 960px;
  margin: 0 auto;
  font-size: 30px;
}

h1 {
  font-size: 80px;
  color: #333;
}

h2 {
  font-size: 80px;
  color: #a61250;
}

h3 {
  font-size: 80px;
  color: #7d1db5;
}

<!-- language: lang-html -->

&lt;img id=&#39;img&#39; src=imageshown&gt;

<!-- end snippet -->

i wanted to see an image but the image just doesnt show how to fix this someone help!!

答案1

得分: 0

Your code to show the image is correct. However, your sequence is wrong as you know code run from top to bottom.

Your current code loads the JavaScript code first, then it loads the element of the <img>.

To fix this, move <script> to the bottom of your body. 为什么在我的JavaScript代码中图片没有显示?

英文:

Your code to show the image is correct. However, your sequence is wrong as you know code run from top to bottom.

Your current code loads the the javascript code first then it loads the element of the &lt;img&gt;

To fix this, move&lt;script&gt; to the bottom of your body. 为什么在我的JavaScript代码中图片没有显示?

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Week 1 of learning java script.&lt;/title&gt;
    &lt;style&gt;
      /* Basic CSS comment */
        body {
          background: beige;
          color: white;
          width: 960px;
          margin: 0 auto;
          font-size: 30px;
        }

        h1 {
          font-size: 80px;
          color: #333;
        }

        h2 {
          font-size: 80px;
          color: #a61250;
        }

        h3 {
          font-size: 80px;
          color: #7d1db5;
        }
    &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
     &lt;img id=&#39;imgss&#39; src=&quot;&quot; &gt;
     &lt;script&gt;
      /* this is an event */
      //alert(&#39;Im Annoying&#39;);
      var username = prompt(&quot;Enter Your Name&quot;);
      var car = [&quot;Bmw&quot;, &quot;Mercedes&quot;, &quot;Koenigsegg&quot;];
      var randomNumber = Math.floor(Math.random() * car.length);
      var randcar = car[randomNumber]
      if (username === &quot;Nilesh&quot;) {
          document.write(&quot;&lt;h1&gt;Hello &quot; + username + &quot; you won a &quot; + randcar + &quot;!&lt;/h1&gt;&quot;);
          if (randcar === &quot;Bmw&quot;) {
              var imageshown = &quot;oldlogo.jpg&quot;
          }
          else if (randcar === &quot;Mercedes&quot;) {
              var imageshown = &quot;oldlogo.jpg&quot;
          }
          else {
              var imageshown = &quot;oldlogo.jpg&quot;
          }
      }
      else if (username === &quot;Chris&quot;) {
          document.write(&quot;&lt;h2&gt;Hey &quot; + username + &quot; You Won A &quot; + randcar + &quot;!&lt;/h2&gt;&quot;);
          if (randcar === &quot;Bmw&quot;) {
              var imageshown = &quot;oldlogo.jpg&quot;
          }
          else if (randcar === &quot;Mercedes&quot;) {
              var imageshown = &quot;oldlogo.jpg&quot;
          }
          else {
              var imageshown = &quot;oldlogo.jpg&quot;
          }
      }
      else {
          document.write(&quot;&lt;h3&gt;&quot; + username + &quot; Go Cry On Your Mom&#39;s Lap &#129315;!&lt;/h3&gt;&quot;);
          var imageshown = &quot;oldlogo.jpg&quot;
      }
      document.getElementById(&#39;imgss&#39;).src = &#39;oldlogo.jpg&#39;;
     &lt;/script&gt;
   &lt;/body&gt;
&lt;/html&gt;

huangapple
  • 本文由 发表于 2023年5月29日 15:50:13
  • 转载请务必保留本文链接:https://go.coder-hub.com/76355542.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定