[Q&A] 画像をボタンにしたい

画像をボタンにしたい

解決したいこと

Cameraの画をクリックしプログラムを実行したい
例.テキストボックスに"Hello"と入力

解決方法を教えて下さい。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECSS3.0</title>
    <link rel="stylesheet" href="css/stylesheet.css">
    <link href="css/slick.css" rel="stylesheet" type="text/css">
    <link href="css/slick-theme.css" rel="stylesheet" type="text/css">

</head>
    <body>
        <script src="script.js"></script>


        <div class="header">
            <div class="header-logo"font-weight:bold;>E<span style="font-size:0.3em;font-weight:normal;">lectronic</span>
                                     C<span style="font-size:0.3em;font-weight:normal;">heck</span>
                                     S<span style="font-size:0.3em;font-weight:normal;">heet</span>
                                     S<span style="font-size:0.3em;font-weight:normal;">ystem</span>

            </div>

                <div id="container">
                    <div class="circle icon">
                        <span class="bar top"></span>
                        <span class="bar middle"></span>
                        <span class="bar bottom"></span>
                    </div>
                </div>

                <div id="containerLogo">
                        <a href="index.html"><img src="images/TCD_B.jpg"></a>   
                </div>




            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
            <script>
                $("#container").click(function () {
                    $(".icon").toggleClass("close");
                })
            </script>


        </div>

        <div class="main">
            <nav id="nav">
                <ul>
                    <!-- <li><a href="#" onclick="window.close(); return false;">Close</a></li> -->
                    <li><a href="index.html">Menu</a></li>
                </ul>

            </nav>


            <div class="contents">

                <div class="contents-item">
                    <img src="images/Camera.png">
                    <p>Camera</p>   
                </div>

                <div class="contents-item">
                    <img src="images/Create.png">
                    <p>Create</p>   
                </div>
            </div>
        </div>
        <div class="SDkEP">
            <div id="inputWrapper">
                    <input id="input" type="search" autocomplete="off"  aria-live="polite" placeholder="ED を入力">


                    <input id="input" type="search" autocomplete="off" aria-live="polite" placeholder="DS を入力">           

            </div>
        </div>
        <!-- <script>
            document.getElementById("close").onclick = () => {
              window.close();
            }
        </script> -->
    </body>
</html>

2Answer

@atm-snag posted at 2020-12-25

JavaScript で実装するのがいいかと思っています．

例えば，上記のように onclick を設定すると，クリック時にプログラムを実行することができそうです．

1Like

Comments

@frswataru
Questioner
ありがとうございます。

@A4r posted at 2020-12-29

解決済みかもしれませんが、一応回答します。
HTML側にsome-idを設定した場合です。
DOMのロードを考慮していないため、bodyの最後などに配置してください。

<div id="some-id" class="contents-item">
    <img src="images/Create.png">
    <p>Create</p>   
</div>

// for jQuery
(function () {
    $('#some-id').on('click', (e) => {
        // 何らかの処理
        console.log(e);
    })
})();

// for native javascript
(function () {
    const element = document.getElementById('some-id')
    element && element.addEventListener('click', (e) => {
        // 何らかの処理
        console.log(e);
    })
})();

また、質問内のinput要素のidが重複しています。
idはページ内でユニークでなければなりません。

<div class="SDkEP">
    <div id="inputWrapper">
        <input id="input-ed" type="search" autocomplete="off" aria-live="polite" placeholder="ED を入力">
        <input id="input-ds" type="search" autocomplete="off" aria-live="polite" placeholder="DS を入力">
    </div>
</div>

上記のように修正した場合は、要素のclickイベントでinput-edのテキストボックスにHelloを出力する場合のコードはこのようになります。

// for jQuery
(function () {
    $('#some-id').on('click', (e) => {
        $('#input-ed').val('Hello');
    })
})();

// for native javascript
(function () {
    const element = document.getElementById('some-id');
    const inputEd = document.getElementById('input-ed');
    element && element.addEventListener('click', (e) => {
        inputEd && (inputEd.value = 'Hello');
    })
})();

1Like

Are you sure you want to delete the question?

画像をボタンにしたい

解決したいこと

2Answer

Comments

Your answer might help someone💌