Question

我尝试了很多不同的方法，但这是我最近的尝试。通过运行这个我无法获得图像来取代一个。我的结果是明智的（正面或反面）。但它并没有取代图像。

我尝试了其他方法，但之后我的结果将无法准确显示，或根本无法显示。我只是需要帮助。我对此非常陌生并且感到沮丧。

在提供的代码中，我确信某些东西不是为某个目的服务，或者某些东西不应该是它的位置。我尝试了很多不同的东西，我几次尝试失去了控制权。

我的Javascript：

    var tails = 0;
    var heads = 0;
    var clicks = 0;
    function clicked()
    {
        clicks += 1;
        document.getElementById("seq").innerHTML = clicks;
    }

    function toss() {
        var rows = 0;
        document.getElementById("results").innerHTML = "";
        while (rows < 1) {   
           var arr = new Array();
            for (var i = 0; i < 1; i++) 
            {       
                var val = Math.floor( Math.random() * 2 );
                if (val === 1) {
                    arr[i] = imageHeads("images/heads.jpg");
                    heads = heads + 1;
                    checkHeads();
                } else {
                    arr[i] = imageTails("images/tails.jpg");
                    tails = tails + 1;
                    checkTails();
                }       
            }
            document.getElementById("results").innerHTML += "<br />" + arr;
            delete arr;
            rows++;
        }
        clicked();
    }

    function checkHeads()
    {
        document.getElementById("headsDisplay").innerHTML = heads;
    }

    function checkTails()
    {
        document.getElementById("tailsDisplay").innerHTML = tails;
    }


    function imageHeads(src) {
        var img = document.createElement("img");
        img.src = src;

        // This next line will just add it to the <body> tag
        document.body.appendChild(img);

    }

    function imageTails(src) {
        var img = document.createElement("img");
        img.src = src;

        // This next line will just add it to the <body> tag
        document.body.appendChild(img);

    }

我的HTML代码段：

    <table>
        <tr>
            <td><input type="button" id="toss" value=" Flip Coin " onclick="toss()"></td>
        </tr>
        <tr>
            <td>Number of Flips Performed: <span id="seq">0</span></td>
        </tr>   
        <tr>
            <td>Heads Count: <span id="headsDisplay">0</span></td>
        </tr>
        <tr>    
            <td>Tails Count: <span id="tailsDisplay">0</span></td>
        </tr>   
        <tr>
            <td><span id="results"><img id="myImg" src="images/heads.jpg"></span></td>
        </tr>
    </table>

我试图制作一个小提琴，但我无法让它正常运行https://jsfiddle.net/qvqzje82/1/

Answer 1

这是因为您正在创建一个新的img并将其附加到bosy而不是将其添加到“结果”范围。将以下功能修改为

function imageHeads(src) {
var img = document.createElement("img");
img.src = src;

// This next line will just add it to the <results> tag
document.getElementById('results').appendChild(img);

}

function imageTails(src) {
var img = document.createElement("img");
img.src = src;


// This next line will just add it to the <results> tag
document.getElementById('results').appendChild(img);

}

Answer 2

<html>
<body>
<div id="display">
<table>
	<tr>
		<td><input type="button" id="toss" value=" Flip Coin " onclick="toss()"></td>
	</tr>
	<tr>
		<td>Number of Flips Performed: <span id="seq">0</span></td>
	</tr>	
	<tr>
		<td>Heads Count: <span id="headsDisplay">0</span></td>
	</tr>
	<tr>	
		<td>Tails Count: <span id="tailsDisplay">0</span></td>
	</tr>	
	<tr>
		<td><span id="results"><img id="myImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/2009NativeAmericanRev.jpg/150px-2009NativeAmericanRev.jpg"></span></td>
	</tr>
</table>
</div> 
</body>
</html>

Alter Procedure [dbo].[OverTime]

AS
BEGIN

SET NOCOUNT ON;
SELECT     dbo.TBL_Justification.Justification_Cisco
          ,dbo.TBL_HC.HC_AgentName, dbo.TBL_HC.HC_Q
          ,dbo.TBL_HC.HC_Site
          ,dbo.TBL_HC.HC_SPV
          ,dbo.TBL_HC.HC_TeamLeader
          ,dbo.TBL_WFM.WFM_Resolution
          ,Sum(dbo.TBL_Justification.Justification_Event_Duration)

FROM       dbo.TBL_Justification LEFT OUTER JOIN
                       dbo.TBL_WFM ON dbo.TBL_Justification.Justification_ID = dbo.TBL_WFM.WFM_JustificationID LEFT OUTER JOIN
                       dbo.TBL_HC ON dbo.TBL_Justification.Justification_Cisco = dbo.TBL_HC.HC_Cisco
WHERE                 (dbo.TBL_WFM.WFM_Resolution = 'Closed Successfully') OR
                      (dbo.TBL_WFM.WFM_Resolution = 'Done As Exception') OR
                      (dbo.TBL_WFM.WFM_Resolution = 'Done After Validation')
END

Answer 3

您也可以在每次折腾时停止src，而是替换已经存在的图片的function imageHeads(src) { var img = document.getElementById("myImg"); img.src = src; } function imageTails(src) { var img = document.getElementById("myImg"); img.src = src; }：

<html>

<head>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>

<body>
<div class="div">
<div align="top">
<a href="http://www.youtube.com/feed/subscriptions" style="background-color:fff;" class="blur" title="Youtube"><img src=" images/youtube.png"/></a>
<a href="http://www.google.com" style="background-color:fff;" class="blur" title="Google"><img src=" images/google.png"/></a>
</div>
<div align="top">
<a href="http://www.tumblr.com" style="background-color:fff;" class="blur" title="Tumblr"><img src=" images/tumblr.png"/></a>
<a href="#" style="background-color:fff;" class="blur" title="Aperture"><img src=" images/aperture.png"/></a>
<a href="http://www.wikipedia.com" style="background-color:fff;" class="blur" title="Wikipedia"><img src=" images/wikipedia.png"/></a>
<a href="about" style="background-color:fff;" class="blur" title="Made By ThuverX Designs"><img src=" images/thuverx.png"/></a>
</div>
<a href="http://mail.google.com" style="background-color:fff;" class="blur" title="Gmail"><img src=" images/gmail.png"/></a>
<a href="http://www.twitter.com" style="background-color:fff;" class="blur" title="Twitter"><img src=" images/twitter.png"/></a>
<div align="left">
<iframe src="http://www.youtube.com/embed/?listType=user_uploads&list=jacksepticeye" width="516" height="290"class="border"></iframe>         
</div>
</div>
</body>

</html>

https://jsfiddle.net/qvqzje82/6/

Javascript图像替换硬币翻转

3 个答案: