J'ai essayé de nombreuses façons différentes, mais celle-ci est ma tentative la plus récente. En exécutant cela, je ne peux pas obtenir l'image pour remplacer celle. Mon résultat est correct (en tête ou en queue). Mais cela ne remplace pas l'image.

J'ai essayé d'autres méthodes, mais mes résultats ne s'affichent pas correctement ou ne s'affichent pas du tout. J'ai juste besoin d'aide. Je suis assez nouveau dans ce domaine et je suis frustré.

Dans le code fourni, je suis sûr que quelque chose ne sert pas à quelque chose ou que quelque chose n'est pas censé être là où il est. J'ai essayé tellement de choses différentes que j'ai perdu le contrôle il y a quelques tentatives.

Mon 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);

    }

Mon extrait de code 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>

J'ai essayé de fabriquer un violon mais je n'arrive pas à le faire fonctionner correctement https://jsfiddle.net/qvqzje82/ 1 /

1
GiBiT 09 12 juil. 2015 à 21:23

3 réponses

Meilleure réponse

C'est parce que vous créez une nouvelle image et l'ajoutez au corps plutôt que de l'ajouter à la plage de "résultats". Modifiez vos fonctions ci-dessous comme

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);

}
1
King Size 12 juil. 2015 à 18:42

Vous pouvez également arrêter d'effacer <span id="results"> à chaque lancer et remplacer à la place le src de l'image qui est déjà là:

function imageHeads(src) {
    var img = document.getElementById("myImg");
    img.src = src;
}

function imageTails(src) {
    var img = document.getElementById("myImg");
    img.src = src;
}

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

0
Sphinxxx 12 juil. 2015 à 18:47
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("https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/2009NativeAmericanRev.jpg/150px-2009NativeAmericanRev.jpg");
				heads = heads + 1;
				checkHeads();
            } else {
                arr[i] = imageTails("https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/2010NativeAmerican_Rev.jpg/150px-2010NativeAmerican_Rev.jpg");
				tails = tails + 1;
				checkTails();
            }       
        }
        document.getElementById("results").appendChild(arr[0]);
        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;
    return img;	

}

function imageTails(src) {
    var img = document.createElement("img");
    img.src = src;
    return img;	
}
<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>
0
Bartłomiej T. Listwon 12 juil. 2015 à 18:47