JavaScript - Issues Referencing The Correct Object

Hello,

On a simple form, there is a radio button group with two radio buttons, a text box, and a submit button.
The first radio button is checked(selected) by default.
The text box input has the onChange event handler so that if the text is changed, the second radio button will be checked(selected).
The problem is the input radio name contains a hyphen that breaks the JavaScript and the name can not be changed.
What is the correct syntax for referencing a hyphenated form input radio name in the onChange event?

Here is the form that works correctly with no hyphen in the input radio name:
Code:

<form name="myFormGood" action="" onsubmit="return false;">
Good Form with no hyphen in radio button name<br>
<input name="radio1" type="radio" value="4" checked> First Option<br>
<input name="radio1" type="radio" value="5"> Second Option<br><br>
Change the text to select the Second Option<br>
<input type="text" name="text1" onChange="document.myFormGood.radio1[1].checked = 'true';" size="10" value=" "><br><br>
<input type="button" name="submit" value="It Works!">
</form>

Here is the form that breaks the JavaScript because it has a hyphen in the input radio name:
Code:

<form name="myFormBad" action="" onsubmit="return false;">
Bad Form with hyphen in radio button name breaks JavaScript<br> 
<input name="radio-1" type="radio" value="4" checked> First Option<br>
<input name="radio-1" type="radio" value="5"> Second Option<br><br>
Change the text to select the Second Option. Nothing Happens.<br>
<input type="text" name="text1" onChange="document.myFormBad.radio-1[1].checked = 'true';" size="10" value=" "><br><br>
<input type="button" name="submit" value="It Doesn't Work!">
</form>

Hi all,

I'm wondering if what I'm trying to do here is even possible but I'd appreciate your thoughts on it.

Code:

<script type="text/javascript">

	function test() {
		var arrays = {
			one: ['1', '2', '3'],
			two: ['a', 'b', 'c']
		}
		
		var foo = 'one';
		alert(arrays.(foo));
	}

	test();
</script>

I've tried numerous variations of the alert line with evals, brackets and jQuery syntax but always seem to get the error:

Code:

XML filter is applied to non-XML value ({one:["1", "2", "3"], two:["a", "b", "c"]})

Which makes me think I'm either attempting something stupid or only missing my target slightly.

The code will be running within a jQuery project up if that helps in any way.

Which of these is the correct way to set the className attribute, or are they both okay?

option 1:
Code:

var t = document.createElement("p");
t.className = "myclass";

option 2:
Code:

var t = document.createElement("p");
t.setAttribute("class","myclass");

So I'm re-writing my procedural Back Jack program to be Object Oriented so that I can add a split option and some other features and I've run into this weird bug...

This is the beginning of the function that assembles the HTML for each card when it is added.


hand.prototype.createCardsHTML = function (cardNum) {
console.log(this.cards);
console.log(this.cards[cardNum]);
console.log(this.cards[cardNum].name);
if(this.player == "dealer" && cardNum == 0){
this.cards[cardNum].imgHTML = '<img src="images/cards/b2fv.png" alt="dealer pocket" />';
}
else{
this.cards[cardNum].imgHTML = '<img src="images/cards/' + this.cards[cardNum].image +'" alt="' + this.cards[cardNum].name + ' of ' + this.cards[cardNum].suit +'s" />';
}

attached is a screen shot of the console.log reports, as you can see the object get stored in the array but for whatever reason I can't access it's individual properties. This only occurs when the hit function is called, not when the initial hands are generated. I'm really confused so any help is appreciated. Also here is the entire script (note: it's very long, a bit disorganized and not yet complete)

// JavaScript Document

// JavaScript Document


window.onload = blackJackTable;

function blackJackTable () {

//set-ables
var insCost = 50;
var dlrHitsOn = 17;
var minBet = 10;
var bank = 500;

//Utilities
var usedCards = new Array(53);
var roundOver = true;
var allBetsPlaced = false;
var dealerWent = false;
//var dlrIncrement = 0;
//var plrIncrement = 0;

//Load Objects
loadJSON("data.json");
function loadJSON(url) {
var headID = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = url;
headID.appendChild(newScript);
newScript.onreadystatechange= function () {
if (this.readyState == 'complete' || this.readyState == 'loaded') startGame();
}
newScript.onload= startGame;
}

function startGame() {

//console.log(deck);

//construct players
function player(playerIdent){
this.lastBet = 0;
this.bet = 0;
this.playerName = playerIdent;
this.hands = new Array();
this.betPlaced = false;
this.bank = bank;
this.insured = false;
}

//Construct Hands
function hand(playerName, id, bet) {
this.total = 0;
this.locked = false;
this.over = true;
this.player = playerName;
this.id = id;
this.bet = bet;
this.aces = 0;
this.handDiv = new Array();
this.cards = this.newCard(2); // adds to cards at random to hand, updates aces and total
}

//function for adding cards to a hand
hand.prototype.newCard = function (howMany){
var cards = new Array();
for(i=0; i<howMany; i++){
var card;
do {
card = Math.floor(Math.random() * 52);
}
//Check to see if the card is in use
while (usedCards[card]);

//Add card to used array
usedCards[card] = true;

var nextCard = cards.length;
cards[nextCard] = deck[card];

//check for ace
if(cards[nextCard].value == 11){
this.aces += 1;
//check for dealer ace in second slot
if(this.player == "dealer" && cards.length == 2){
//call offer insurance if dealer has ace in second slot
this.offerIns();///!!! re-write to reference hand not player
}
}
this.total += cards[nextCard].value;
}
//update player total
return cards;
}

//DOM commands to generate dealer area HTML
player.prototype.generateDlrHTML = function () {
this.dlrRegion = document.getElementById('dealer-region');

//creates a div for dealer hand
this.plrHands = document.createElement('div');
//sets the class name for dealer hand div
this.plrHands.setAttribute('class', 'dealer-hands');
//adds dealerhand div to dlrRegion div
this.dlrRegion.appendChild(this.plrHands);


//creates a div for dealer total
this.dealerTotalRegion = document.createElement('div');
//sets the class name for dealer hand div
this.dealerTotalRegion.setAttribute('class', 'dealer-total');
//adds dealertotal div to dlrRegion div
this.plrHands.appendChild(this.dealerTotalRegion);
}

//DOM commands to generate each player area HTML
player.prototype.generatePlrHTML = function () {
this.plrRegion = document.getElementById('players-region');

//creates a div for player hands
this.plrHands = document.createElement('div');
//sets the class name for player hands div and adds it to region
this.plrHands.setAttribute('class', 'hands');
this.plrRegion.appendChild(this.plrHands);

//Create player bet and bank region
this.hud = document.createElement('div');
//sets the class name for player hud and adds to region
this.hud.setAttribute('class', 'hud');
this.plrRegion.appendChild(this.hud);

//Create bank display
this.bankDisplay = document.createElement('span');
//sets the class name for player hud and adds to region
this.bankDisplay.setAttribute('class', 'bank-display');
this.hud.appendChild(this.bankDisplay);

//Create bet display
this.betDisplay = document.createElement('span');
//sets the class name for player hud and adds to region
this.betDisplay.setAttribute('class', 'bet-display');
this.hud.appendChild(this.betDisplay);

//Create bet field
this.betField = document.createElement('input');
//sets the class name for player hud and adds to region
this.betField .setAttribute('class', 'bet-input');
this.betField .setAttribute('type', 'text');
this.betField .setAttribute('value', 'bet here');
this.betField .setAttribute('name', 'bet-input');
this.hud.appendChild(this.betField );

//Create bet Button
this.betBtn = document.createElement('input');
//sets the class name for player hud and adds to region
this.betBtn.setAttribute('class', 'bet-btn');
this.betBtn.setAttribute('type', 'button');
this.betBtn.setAttribute('value', 'Bet');
this.betBtn.setAttribute('name', 'Bet');
this.hud.appendChild(this.betBtn);
var subvertEvent = this;
this.betBtn.onclick = function () { subvertEvent.placeBet();};

//Create deal button
this.dealBtn = document.createElement('input');
//sets the class name for player hud and adds to region
this.dealBtn.setAttribute('class', 'deal-btn');
this.dealBtn.setAttribute('type', 'button');
this.dealBtn.setAttribute('value', 'Deal');
this.dealBtn.setAttribute('name', 'Deal');
this.hud.appendChild(this.dealBtn);
this.dealBtn.onclick = function () { subvertEvent.deal();};

}

//DOM commands to create hand HTML
player.prototype.createHandHTML = function (handNum){
//for(i=0; i<this.hands.length; i++){
//Create a hand div
this.hands[handNum].handDiv = document.createElement('div');
//sets the class name for player hud and adds to region
var handClass = 'hand-' +this.hands[handNum].id;
this.hands[handNum].handDiv.setAttribute('class', handClass);
this.plrHands.appendChild(this.hands[handNum].handDiv);
this.hands[handNum].createHandCtrlHTML(handNum);
//}
}


//Hit - adds and displays card to hand
hand.prototype.hit = function () {
this.cards.push(this.newCard(1));
var cardNum = this.cards.length -1;
this.createCardsHTML(cardNum);
}

//Stand - Locks hand - If all hands are locked triggers dealersTurn()
hand.prototype.stand = function () {
//lock this hand
this.locked = true;
if(checkAllLocked == true){
dealersTurn();
}
}

//Double Down - doubles bet on hand calls hit for a single card then forces a stand.
hand.prototype.doubleDown = function () {
if (this.total > 0 && this.cards.length == 2){
//double bet
this.bet = this.bet * 2;
//!!!update bet
//draw a card
this.hit();
//force player to stand
this.stand();
}
else{
var message = "Sir/Maddam you cannot double down at this time.";
dealerSays(message, "okay");
}
}

//Split - Creates a new player hand and assigns a new bet, moves cards as appropriate.
hand.prototype.splitHand = function () {

}

//Creates hand control HTML
hand.prototype.createHandCtrlHTML = function (handNum) {
if(this.player != "dealer"){

//hand Control Region
this.handControl = document.createElement('div');
//sets the class name for player hud and adds to region
this.handControl.setAttribute('class', 'hand-control');
this.handDiv.appendChild(this.handControl);

//Create hit button
this.hitBtn = document.createElement('input');
//sets the class name for player hud and adds to region
this.hitBtn.setAttribute('class', 'hit-btn');
var btnId = 'hit-btn-' + this.player + '-' + this.id;
this.hitBtn.setAttribute('id', 'btnId');
this.hitBtn.setAttribute('type', 'button');
this.hitBtn.setAttribute('value', 'Hit');
this.hitBtn.setAttribute('name', 'Hit');
this.handControl.appendChild(this.hitBtn);
var subvertEvent = this;
this.hitBtn.onclick = function () { subvertEvent.hit();};

//Create Stand button
this.standBtn = document.createElement('input');
//sets the class name for player hud and adds to region
this.standBtn.setAttribute('class', 'hit-btn');
var btnId = 'stand-btn-' + this.player + '-' + this.id;
this.standBtn.setAttribute('id', 'btnId');
this.standBtn.setAttribute('type', 'button');
this.standBtn.setAttribute('value', 'Stand');
this.standBtn.setAttribute('name', 'Stand');
this.handControl.appendChild(this.standBtn);
this.standBtn.onclick = function () { hands[handNum].stand();};

//Create Double Down button
this.dDBtn = document.createElement('input');
//sets the class name for player hud and adds to region
this.dDBtn.setAttribute('class', 'hit-btn');
var btnId = 'doubledown-btn-' + this.player + '-' + this.id;
this.dDBtn.setAttribute('id', 'btnId');
this.dDBtn.setAttribute('type', 'button');
this.dDBtn.setAttribute('value', 'Double Down');
this.dDBtn.setAttribute('name', 'Double Down');
this.handControl.appendChild(this.dDBtn);
this.dDBtn.onclick = function () { hands[handNum].doubleDown();};

//Create Split button
this.splitBtn = document.createElement('input');
//sets the class name for player hud and adds to region
this.splitBtn.setAttribute('class', 'hit-btn');
var btnId = 'split-btn-' + this.player + '-' + this.id;
this.splitBtn.setAttribute('id', 'btnId');
this.splitBtn.setAttribute('type', 'button');
this.splitBtn.setAttribute('value', 'Double Down');
this.splitBtn.setAttribute('name', 'Double Down');
this.handControl.appendChild(this.splitBtn);
this.splitBtn.onclick = function () { hands[handNum].splitHand();};
}

}


//Actived when used hits "deal" button - Adds a hand object to player object if appropriate //!!!Does not support multiplayer by design
player.prototype.deal = function () {
if(allBetsPlaced == true && roundOver == true){
//wipes old hands
clearHands();
//adds a new hand
players[0].newHand();
this.newHand();
//sets round over to false as this begins the new round
roundOver = false;
}
}

//New hand function creates a new hand called by deal and split
player.prototype.newHand = function () {
var handIdPass = this.hands.length + 1;
this.hands.push(new hand(this.playerName, handIdPass, this.bet));
var handNum = this.hands.length - 1;
//alert(this.hands.length);
this.createHandHTML(handNum);
for (i=0; i<this.hands[handNum].cards.length; i++){
this.hands[handNum].createCardsHTML(i);
}
}


//DOM commands to create cards
hand.prototype.createCardsHTML = function (cardNum) {
console.log(this.cards);
console.log(this.cards[cardNum]);
console.log(this.cards[cardNum].name);
if(this.player == "dealer" && cardNum == 0){
this.cards[cardNum].imgHTML = '<img src="images/cards/b2fv.png" alt="dealer pocket" />';
}
else{
this.cards[cardNum].imgHTML = '<img src="images/cards/' + this.cards[cardNum].image +'" alt="' + this.cards[cardNum].name + ' of ' + this.cards[cardNum].suit +'s" />';
}
this.cards[cardNum].cardDiv = document.createElement('div');
var cardId = 'card-' + this.cards[cardNum].id;
this.cards[cardNum].cardDiv.setAttribute('id', cardId);
$(this.cards[cardNum].cardDiv).hide();
this.cards[cardNum].cardDiv.innerHTML = this.cards[cardNum].imgHTML;
this.handDiv.appendChild(this.cards[cardNum].cardDiv);
$(this.cards[cardNum].cardDiv).fadeIn(1000);
}
.....

Hey guys, First post i have searched the web a lot on this subject and am still confused so i thought id try and get some help from the experts, the following function works great in every browser except IE, the line of code that breaks in IE is highlighted in red. I have read some topics about this not working in IE and saw some workarounds with innerhtml or something but i don't really understand. Can someone please take some time to figure out a fix for this?

Code:

function displayStream(live_id) {

		var stream_out = document.getElementById("stream_out");
		for (var j = 0; j < stream_out.childNodes.length; j++) {
			stream_out.removeChild(stream_out.childNodes[j]);
		}
		var object = document.createElement("object");     		
                object.setAttribute("height", "475");
		object.setAttribute("width", "998");
		
		var param = document.createElement("param");
		//param.setAttribute("name", "movie");
                param.name = 'movie';
		param.setAttribute("value", "http://www.own3d.tv/livestream/" + live_id);
		object.appendChild(param);
		
		var param = document.createElement("param");
		param.setAttribute("name", "allowfullscreen");
		param.setAttribute("value", "true");
		object.appendChild(param);
		
		var param = document.createElement("param");
		//param.setAttribute("name", "wmode");
                param.name = 'wmode';
		param.setAttribute("value", "transparent");
		object.appendChild(param);

		var embed = document.createElement('embed');
		embed.setAttribute("type", "application/x-shockwave-flash");
		embed.setAttribute("src", "http://www.own3d.tv/livestream/" + live_id +";autoplay=true");

		embed.setAttribute("allowfullscreen", "true");
		embed.setAttribute("wmode", "transparent");
		embed.setAttribute("height", "475");
		embed.setAttribute("width", "998");
		 object.appendChild(embed); 

		stream_out.appendChild(object);
	}