I try to implement a slide show in javascript, but I can't see any images.

When I press the button, there is movement of the image, but the picture is not displayed.
I'd like to have the image displayed.Thank you for your cooperation.

Error

 document.addEventListener('DOMContentLoaded', function(e){
  'use strict';

  var files = [
    '<%[email protected]_image%>',
    '<%[email protected]_image%>',
    '<%[email protected]_image%>',
    '<%[email protected]_image%>',
    '<%[email protected]_image%>'
  ];
  
  var currentNum = 0;
  varprev = document.getElementById('prev');
  var next= document.getElementById('next');
  target= document.getElementById('target');

  prev.addEventListener('click', function(){
    currentNum--;
    if(currentNum<0){
      currentNum = files.length-1;
    }
    target.src = files [currentNum];
  });

  next.addEventListener('click', function(){
    currentNum++;
    if(currentNum>files.length-1){
      currentNum = 0;
    }
    target.src = files [currentNum];
  });

}, false);

<div class="main">
    <i class="fas fa-chevron-circle-left" aria-hidden="true" id="prev"></i>
    <img src="<%[email protected]%>"id="target" style="width:950px;height:400px;padding-bottom:15px;padding-top:20px;">
    <i class="fas fa-chevron-circle-right" area-hidden="true" id="next"></i>
  </div>
  <div class="king">
    <ul class="example">
        <lic class="current"><img src="<%[email protected]_image%>">/li>
        <li><img src="<%[email protected]_image%>">/li>
        <li><img src="<%[email protected]_image%>">/li>
        <li><img src="<%[email protected]_image%>">/li>
        <li><img src="<%[email protected]_image%>">/li>
    </ul>
  </div>
  <script src="javascripts/main.js"></script>

javascript ruby-on-rails ruby html

2022-09-30 13:45

2 Answers

Error trying to load a file named /plans/<%[email protected]_image%>.

Since you cannot embed Ruby's expression directly into JavaScript, you can embed JSON in HTML (ERB) as follows:

<script type="application/json" id="image-data">
<%=@some_array.to_json.html_safe%>
</script>

On the script side,

const files=JSON.parse( document.getElementById("image-data").textContent);

Try loading it as shown in .

Other

and so on.

add

Where should I place the scripted code?

Place the JSON data anywhere on the View side.(Anywhere is fine as long as it's printed in HTML)

How do you get it from HTML?

For example, name the class test for the img and

const files=Array.prototype.map.call( document.getElementsByClassName("test"), (e)=>e.getAttribute("src")))

Please note thatThe second argument is called the Arrow function, in which case

const files=Array.prototype.map.call( document.getElementsByClassName("test"), function(e){return.getAttribute("src")})

is equivalent to Array.prototype.map.call because HTMLCollection instead of Array getsElementsByClassName.

2022-09-30 13:45

Can't you think that the image path is wrong?

2022-09-30 13:45

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656