画像を入れるときのエラー

Question

var sourceImageUrl = 'default';

            // Display the image.
            document.getElementById("button1").onclick = function () {
                // ここに#buttonをクリックしたら発生させる処理を記述する
                sourceImageUrl = document.getElementById("inputImage").value;
                console.log(sourceImageUrl);
            };

            document.getElementById("button2").onclick = function () {
                sourceImageUrl = document.getElementById("inputImage2").value;
                console.log(sourceImageUrl);
            };

            document.querySelector("#sourceImage").src = sourceImageUrl;

これをある関数の中に書いているのですが一番最後の行でsouceImageUrlが無効の画像urlだというエラーメッセージが来ます。この下のプログラムだと行けます。なぜですか。

var sourceImageUrl = document.getElementById("inputImage").value;
        document.querySelector("#sourceImage").src = sourceImageUrl;

HTMLはこちらです。inputimage2も違う画像URLで同じようにあります。

 <input type="text" name="inputImage" id="inputImage"
    value="https://upload.wikimedia.org/wikipedia/commons/c/c3/RH_Louise_Lillian_Gish.jpg" />

ちなみにエラーメッセージは、下に書いておきます。

file:///D:/WP%E6%BC%94%E7%BF%92/%E7%AC%AC05%E5%9B%9E/WebAPI%E9%85%8D%E5%B8%83%E7%89%A9/WebAPI%E9%85%8D%E5%B8%83%E7%89%A9/default net::ERR_FILE_NOT_FOUND

Image (async)
processImage @ FaceAPIサンプル2.html:42
onclick @ FaceAPIサンプル2.html:89
westcentralus.api.cognitive.microsoft.com/face/v1.0/detect?returnFaceId=true&returnFaceLandmarks=false&returnFaceAttributes=age%2Cgender%2CheadPose%2Csmile%2CfacialHair%2Cglasses%2Cemotion%2Chair%2Cmakeup%2Cocclusion%2Caccessories%2Cblur%2Cexposure%2Cnoise:1 POST https://westcentralus.api.cognitive.microsoft.com/face/v1.0/detect?returnFaceId=true&returnFaceLandmarks=false&returnFaceAttributes=age%2Cgender%2CheadPose%2Csmile%2CfacialHair%2Cglasses%2Cemotion%2Chair%2Cmakeup%2Cocclusion%2Caccessories%2Cblur%2Cexposure%2Cnoise 400 (Bad Request)

ボタンを選択したときに、URLを変更することが出来ないのですが、そのやり方も知りたいです。

Comments

[m.ts10806]

コード、エラーメッセージはマークダウンのcode機能を利用してご提示ください。

[archan]

提示しました。
申し訳ございません。

[退会済みユーザー]

Javaって書いてますけどどう見てもJSですよね…

それはさておき
> document.getElementById("inputImage")
これは何者でしょうか？
HTMLがないのでわかりません。

[archan]

Java Scriptです。ご指摘ありがとうございます。

Answer 1

var sourceImageUrl = 'default';
document.querySelector("#sourceImage").src = sourceImageUrl;

var sourceImageUrl = document.getElementById("inputImage").value;
document.querySelector("#sourceImage").src = sourceImageUrl;

こうかけばわかるんじゃないでしょうか。
上はsrcに__'default'と入れているので、同じフォルダに有る__default__というファイルを探したけど見つからない。
下はdocument.getElementById("inputImage").valueつまり"https://upload.wikimedia.org/wikipedia/commons/c/c3/RH_Louise_Lillian_Gish.jpg"__が入るのでOK。

Comments

[archan]

そうなんですね！わかりました！！
エラーの無くし方はわかりましたが、ボタンを選択したときに、URLを変更することが出来ないのですが、そのやり方とかはわかりますか？

[退会済みユーザー]

ボタンを押したときの処理に、document.querySelector("#sourceImage").src を差し替える処理を入れればいいです。