javascriptで写真の切り替えを実装したい

Ruby

省略
<div class="another-image">
     <input type="button" value="＜前の写真" class="change-before" id="before" onclick="go_back()">
     <input type="button" value="次の写真＞" class="change-next" id="next" onclick="go_forward()">
     <script>
            var pics_src = new Array("ここに商品出品者の商品画像のURL");
            var num = 0;
 
            function go_forward(){
                if (num == 4) {
                    num = 0;
                }
                else {
                    num ++;
                }
                document.getElementById("next").src=pics_src[num];
            }
 
            function go_back(){
                if (num == 0) {
                    num = 4;
                }
                else {
                    num --;
                }
                document.getElementById("before").src=pics_src[num];
            }
            </script>
    </div>
省略

# テーブル設計

## users テーブル

| Column             | Type         | Options                        |
| ------------------ | ------       | -----------                    |
| name               | string       | null: false                    |
| email              | string       | null: false, unique: true      |
| encrypted_password | string       | null: false                    |
| first_name         | string       | null: false                    |
|family_name         | string       | null: false                    |
|first_name_kana     | string       | null: false                    |
|family_name_kana    | string       | null: false                    |
| birthday           | date         | null: false                    |

has_many :items
has_many :purchase_histories



## purchase_historiesテーブル

| Column     | Type      | Options     |
| -------    | --------- | ----------- |
|  user   | references| null: false, foreign_key: true |
|  item   | references| null: false, foreign_key: true |

belongs_to :user
belongs_to :item
has_one :sending_destination



## items テーブル

| Column             | Type       | Options                        |
| ------             | ---------- | ------------------------------ |
| item_name          | string     | null: false |
| introduction       | text       | null: false |
| price              | integer    | null: false |
| delivery_days_id   | integer    | null: false | 
| item_condition_id  | integer    | null: false |
| postage_payer_id   | integer    | null: false |
| prefecture_code_id | integer    | null: false |
| category_id        | integer    | null: false |
| user               | references | null: false,foreign_key: true |

 belongs_to :user
 has_one :purchase_history





## sending_destinations テーブル

| Column                      | Type         | Options                        |
| ------                      | ----------   | ------------------------------ |
| post_code                   | string       | null: false                    |
| prefecture_code_id          | integer      | null: false                    |
| city                        | string       | null: false                    |
| house_number                | string       | null: false                    |
| building_name               | string       |                                |
| phone_number                | string       | null: false                    |
| purchase_history            | references   |  null: false,foreign_key: true |

 belongs_to :purchase_history

class ItemsController < ApplicationController
  before_action :set_item, except: [:index, :new, :create]
  before_action :authenticate_user!, { except: [:index, :show] }
  before_action :user_login, only: [:edit, :destroy]
  def index
    @items = Item.order('created_at DESC')
  end

  def new
    if user_signed_in?
      @item = Item.new
    else
      redirect_to user_session_path(@item.id)
    end
  end

  def create
    @item = Item.new(item_params)
    if @item.save
      redirect_to root_path
    else
      render :new
    end
  end

  def show
  end

  def edit
   if @item.user_id != current_user.id || @item.purchase_history != nil
    redirect_to root_path
   end
  end

  def update
    if @item.update(item_params)
      redirect_to item_path(@item)
    else
      render :edit
    end
  end

  def destroy
    if @item.destroy
      redirect_to root_path
    else
      redirect_to root_path
    end
  end

  private

  def item_params
    params.require(:item).permit(:item_name, :introduction, :price, :delivery_days_id, :item_condition_id, :postage_payer_id,
                                 :prefecture_code_id, :category_id, {images: []}).merge(user_id: current_user.id)
  end

  def set_item
    @item = Item.find(params[:id])
  end

  def user_login
    redirect_to root_path unless current_user.id == @item.user_id
  end
end

class Item < ApplicationRecord
  has_many_attached :images
  belongs_to :user
  has_one :purchase_history

  extend ActiveHash::Associations::ActiveRecordExtensions
  belongs_to :category
  belongs_to :item_condition
  belongs_to :postage_payer
  belongs_to :prefecture_code
  belongs_to :delivery_days

  validates :item_name, presence: true
  validates :introduction, presence: true
  validates :images, presence: true
  validates :images, length: { minimum: 1, maximum: 5, message: "は1枚以上5枚以下にしてください" }

  validates_format_of :price, with: /\A[0-9]+\z/
  validates :price, numericality: { only_integer: true, greater_than_or_equal_to: 300, less_than_or_equal_to: 9_999_999 },
                    presence: true
  validates :delivery_days_id, :item_condition_id, :postage_payer_id, :prefecture_code_id, :category_id,
            numericality: { other_than: 1, message: "を入力してください" }
end