一白山中

自分を磨き、自分なりの幸せを追求しよう

JavaScriptでHTML画像を入れ替えする

JavaScript

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>一白山中(ennya.hatenablog.com)</title>
</head>
<body>
    
<script>
function changeImage()
{
    element=document.getElementById('myimage')
    if (element.src.match("変更後")) //検索する機能、一致するかどうか判断する
    {
        element.src="/images/変更前.gif";
    }
    else
    {
        element.src="/images/変更後.gif";
    }
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/変更前.gif" width="100" height="180">
<p>画像をクリックすると、切り替えできる</p>
    
</body>
</html>

 

簡潔したソース①

function changeImage(){
    var s = document.getElementById('myimage');
    s.src = s.src.match('変更前')?"/images/変更後.gif":"/images/変更前.gif";
}

簡潔したソース②

<script>
function changeImage(s){
    s.src = s.src.match('変更前')?"/images/変更後.gif":"/images/変更前.gif";
}
</script>
<img id="myimage" onclick="changeImage(this)" src="/images/変更前.gif" width="100" height="180">
<p>画像をクリックすると、切り替えできる</p>

簡潔したソース③

<img id="myimage" onclick="~function(e){e.src=e.src.match('変更前')?'/images/変更後.gif':'/images/変更前.gif'}(this)" src="/images/変更前.gif" width="100" height="180">
<p>画像をクリックすると、切り替えできる</p>

htmlを入れ替えするJavaScriptソース例2

JavaScript

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>一白山中(ennya.hatenablog.com)</title>
</head>
<body>
    
<h1>初めてのJavaScript</h1>
<p id="demo">
JavaScriptでHTML要素を入れ替える
</p>
<script>
function myFunction()
{
    x=document.getElementById("demo");  // 要素を特定する
    x.innerHTML="Hello JavaScript!";    // コンテンツ変更
}
</script>
<button type="button" onclick="myFunction()">クリックしてください</button>
    
</body>
</html>

onclickイベント

JavaScript

関数alterは通常のソースにはなかなか出番がないですが、実装中の検証ツールとしては、よく使われます。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>一白山中(ennya.hatenablog.com)</title>
</head>
<body>
    
<h1>初めてのJavaScript</h1>
<p>
JavaScriptイベントに対する反応、例えば、ボタンクリック
</p>
<button type="button" onclick="alert('ようこそ!')">クリックしてください!</button>
    
</body>
</html>

HTML出力するJavaScriptのソース例

JavaScript

JavaScriptでhtml生成する

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一白山中(ennya.hatenablog.com)</title>
</head>
<body>
    
<p>
JavaScript は直接に HTML ソースの中に書くことはできる
</p>
<script>
document.write("<h1>これはタイトルです</h1>");
document.write("<p>これは段落です。</p>");
</script>
<p>
HTML 出力途中で、 <strong>document.write</strong>使用すべきであるが、もし
HTML 読み込み完了後に利用すると、（例えば、関数の中で）、HTMLを覆ることになる</p>
    
</body>
</html>

上記ですと、ただHTML生成するだけですが、もし画面読み込み完了後に、イベントでdocument.write利用すると、画面全体的に更新されます

<script>
function myfunction(){
    document.write("関数でdoucment.write実行する。いわゆるページレンダリング後で実行されると、画面全体的に更新される");
}
document.write("<h1>これはタイトルです</h1>");
document.write("<p>これは一つの段落です</p>");
</script>
<p >
HTML生成処理中に<strong>document.write</strong>を利用すべきです。 もし、ページレンダリング後で、利用すると、画面全体的に更新されます。</p>
<button type="button" onclick="myfunction()">ここクリックしてください</button>

※画面更新される問題の対策

<button onclick="winTest()">ボタン</button>
function winTest()
{
    var txt1 = "This is a new window.";
    var txt2 = "This is a test.";
    document.open("text/html","replace");//追加
    document.writeln(txt1);
    document.write(txt2);
    document.close();//追加
}

ボタンで、htmlを入れ替えするJavaScriptソース例

JavaScript

クリック操作で、時刻を表示する

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一白山中(ennya.hatenablog.com)</title>
<script>
function displayDate(){
    document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>

<h1>初めてのJavaScriptプログラム</h1>
<p id="demo">これは一つの段落</p>

<button type="button" onclick="displayDate()">日付表示</button>

</body>
</html>