How do I duplicate this code for multiple attributes without it displaying “NaN”?
0
The code worked for Strength until I duplicated it to work for additional code and it disabled the button. I was wondering how to make it convert it to other areas i.e. Agility. I'm using strength as a fill in for the values as a fill in but I don't know how to work it from there.
<script>
var strength = 0;
document.getElementById("strength").innerHTML = strength;
function updateButtonDisabled() {
// If strength less than equal zero disable the button
if(strength <= 0) {
document.getElementById("subButton").setAttribute('disabled', 'disabled');
}
else {
document.getElementById("subButton").removeAttribute('disabled');
}
}
function subStrength(){
strength = strength - 1;
document.getElementById("strength").innerHTML = strength;
updateButtonDisabled();
}
function addStrength(){
strength = strength + 1;
document.getElementById("strength").innerHTML = strength;
updateButtonDisabled();
}
<th scope="col">
<button class="button" type="button" onclick="subStrength();"
value="subtract">-</button>
<th><span id="strength"></span></th>
<th scope="col">
<button class="button" type="button" onclick="addStrength()" value="add">+
</button>
</th>
</th>
javascript html css
asked Nov 16 '18 at 1:46
Mr. Student.exeMr. Student.exe
103
add a comment |
0
The code worked for Strength until I duplicated it to work for additional code and it disabled the button. I was wondering how to make it convert it to other areas i.e. Agility. I'm using strength as a fill in for the values as a fill in but I don't know how to work it from there.
<script>
var strength = 0;
document.getElementById("strength").innerHTML = strength;
function updateButtonDisabled() {
// If strength less than equal zero disable the button
if(strength <= 0) {
document.getElementById("subButton").setAttribute('disabled', 'disabled');
}
else {
document.getElementById("subButton").removeAttribute('disabled');
}
}
function subStrength(){
strength = strength - 1;
document.getElementById("strength").innerHTML = strength;
updateButtonDisabled();
}
function addStrength(){
strength = strength + 1;
document.getElementById("strength").innerHTML = strength;
updateButtonDisabled();
}
<th scope="col">
<button class="button" type="button" onclick="subStrength();"
value="subtract">-</button>
<th><span id="strength"></span></th>
<th scope="col">
<button class="button" type="button" onclick="addStrength()" value="add">+
</button>
</th>
</th>
javascript html css
asked Nov 16 '18 at 1:46
Mr. Student.exeMr. Student.exe
103
You don't duplicate the code in the first place; what you do is write reusable code: jsfiddle.net/khrismuc/3u2kfLn5
– Chris G
Nov 16 '18 at 2:06
So your code works in JSfiddle, but as soon as I move it into my code, the buttons won't work
– Mr. Student.exe
Nov 19 '18 at 2:15
The JS code has to run after the buttons already exist; in case you have the<script>in the document's<head>, move it to the end of<body>instead, right before</body>.
– Chris G
Nov 19 '18 at 11:10
add a comment |
0
0
0
The code worked for Strength until I duplicated it to work for additional code and it disabled the button. I was wondering how to make it convert it to other areas i.e. Agility. I'm using strength as a fill in for the values as a fill in but I don't know how to work it from there.
<script>
var strength = 0;
document.getElementById("strength").innerHTML = strength;
function updateButtonDisabled() {
// If strength less than equal zero disable the button
if(strength <= 0) {
document.getElementById("subButton").setAttribute('disabled', 'disabled');
}
else {
document.getElementById("subButton").removeAttribute('disabled');
}
}
function subStrength(){
strength = strength - 1;
document.getElementById("strength").innerHTML = strength;
updateButtonDisabled();
}
function addStrength(){
strength = strength + 1;
document.getElementById("strength").innerHTML = strength;
updateButtonDisabled();
}
<th scope="col">
<button class="button" type="button" onclick="subStrength();"
value="subtract">-</button>
<th><span id="strength"></span></th>
<th scope="col">
<button class="button" type="button" onclick="addStrength()" value="add">+
</button>
</th>
</th>
javascript html css
asked Nov 16 '18 at 1:46
Mr. Student.exeMr. Student.exe
103
The code worked for Strength until I duplicated it to work for additional code and it disabled the button. I was wondering how to make it convert it to other areas i.e. Agility. I'm using strength as a fill in for the values as a fill in but I don't know how to work it from there.
<script>
var strength = 0;
document.getElementById("strength").innerHTML = strength;
function updateButtonDisabled() {
// If strength less than equal zero disable the button
if(strength <= 0) {
document.getElementById("subButton").setAttribute('disabled', 'disabled');
}
else {
document.getElementById("subButton").removeAttribute('disabled');
}
}
function subStrength(){
strength = strength - 1;
document.getElementById("strength").innerHTML = strength;
updateButtonDisabled();
}
function addStrength(){
strength = strength + 1;
document.getElementById("strength").innerHTML = strength;
updateButtonDisabled();
}
<th scope="col">
<button class="button" type="button" onclick="subStrength();"
value="subtract">-</button>
<th><span id="strength"></span></th>
<th scope="col">
<button class="button" type="button" onclick="addStrength()" value="add">+
</button>
</th>
</th>
javascript html css
javascript html css
asked Nov 16 '18 at 1:46
Mr. Student.exeMr. Student.exe
103
asked Nov 16 '18 at 1:46
Mr. Student.exeMr. Student.exe
103
asked Nov 16 '18 at 1:46
Mr. Student.exeMr. Student.exe
103
asked Nov 16 '18 at 1:46
Mr. Student.exeMr. Student.exe
103
asked Nov 16 '18 at 1:46
Mr. Student.exeMr. Student.exe
103
103
You don't duplicate the code in the first place; what you do is write reusable code: jsfiddle.net/khrismuc/3u2kfLn5
– Chris G
Nov 16 '18 at 2:06
So your code works in JSfiddle, but as soon as I move it into my code, the buttons won't work
– Mr. Student.exe
Nov 19 '18 at 2:15
The JS code has to run after the buttons already exist; in case you have the<script>in the document's<head>, move it to the end of<body>instead, right before</body>.
– Chris G
Nov 19 '18 at 11:10
add a comment |
You don't duplicate the code in the first place; what you do is write reusable code: jsfiddle.net/khrismuc/3u2kfLn5
– Chris G
Nov 16 '18 at 2:06
So your code works in JSfiddle, but as soon as I move it into my code, the buttons won't work
– Mr. Student.exe
Nov 19 '18 at 2:15
The JS code has to run after the buttons already exist; in case you have the<script>in the document's<head>, move it to the end of<body>instead, right before</body>.
– Chris G
Nov 19 '18 at 11:10
You don't duplicate the code in the first place; what you do is write reusable code: jsfiddle.net/khrismuc/3u2kfLn5
– Chris G
Nov 16 '18 at 2:06
You don't duplicate the code in the first place; what you do is write reusable code: jsfiddle.net/khrismuc/3u2kfLn5
– Chris G
Nov 16 '18 at 2:06
So your code works in JSfiddle, but as soon as I move it into my code, the buttons won't work
– Mr. Student.exe
Nov 19 '18 at 2:15
So your code works in JSfiddle, but as soon as I move it into my code, the buttons won't work
– Mr. Student.exe
Nov 19 '18 at 2:15
The JS code has to run after the buttons already exist; in case you have the
<script> in the document's <head>, move it to the end of <body> instead, right before </body>.– Chris G
Nov 19 '18 at 11:10
The JS code has to run after the buttons already exist; in case you have the
<script> in the document's <head>, move it to the end of <body> instead, right before </body>.– Chris G
Nov 19 '18 at 11:10
add a comment |
1 Answer
1
active
oldest
votes
0
Your code isn't exactly reusable code, and there are some missing components, such as id attributes. The best way you're going to be able to reuse this code is by creating a function that generates the buttons for you, that way the scope of the add/sub functions is correct. Here's a pure JavaScript solution I created for you.
Also, it appears you're creating a game, possibly an RPG, in that case, I'd highly suggest you use a framework that designed around reusable components, such as React. And if you're not keen on that, at least jQuery to make element creation more enjoyable.
var stats = {
strength: 0,
agility: 1,
speed: 2
}
function disableButton (button, value) {
if (value <= 0) {
button.setAttribute('disabled', 'disabled');
} else {
button.removeAttribute('disabled');
}
}
function createButton(stat) {
const wrapperEl = document.createElement('section');
const labelEl = document.createElement('span');
const leftEl = document.createElement('button');
const valueEl = document.createElement('span');
const rightEl = document.createElement('button');
labelEl.innerText = ` ${stat}`;
valueEl.innerText = stats[stat];
leftEl.innerHTML = '-';
rightEl.innerHTML = '+';
leftEl.onclick = function () {
stats[stat]--;
valueEl.innerText = stats[stat];
disableButton(this, stats[stat]);
}
rightEl.onclick = function () {
stats[stat]++;
valueEl.innerText = stats[stat];
disableButton(leftEl, stats[stat]);
}
if (stats[stat] <= 0) {
leftEl.setAttribute('disabled', 'disabled');
}
wrapperEl.appendChild(leftEl);
wrapperEl.appendChild(valueEl);
wrapperEl.appendChild(rightEl);
wrapperEl.appendChild(labelEl);
return wrapperEl;
}
// Wrapped in DOMContentLoaded event listener
document.addEventListener("DOMContentLoaded", function(event) {
Object.keys(stats).forEach(function(stat) {
document.getElementById('stats').appendChild(createButton(stat))
});
});<section id="stats"></section>answered Nov 16 '18 at 3:00
AnonymousSBAnonymousSB
2,229221
thanks for the help, only problem is no buttons show. I've replaced the JS and that didn't work, I then removed the button HTML code and that just removed the buttons all together. Anything you could think of?
– Mr. Student.exe
Nov 19 '18 at 1:27
This solution generates all the HTML in JavaScript and puts it inside an element with theidofstats. If you're looking to just copy/paste this JS into your page, you'll need to remove all your button HTML and just put<section id="stats"></section>where it used to be.
– AnonymousSB
Nov 19 '18 at 1:40
I tried that and it just shows my background, I'll give it another shot.
– Mr. Student.exe
Nov 19 '18 at 1:45
So nothing shows, I've tried taking out just the table and button code, and the whole code, but nothing seems to be displaying.
– Mr. Student.exe
Nov 19 '18 at 1:50
Can you put your code on jsFiddle.net so I can see the full context?
– AnonymousSB
Nov 19 '18 at 2:18
|
show 8 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53330316%2fhow-do-i-duplicate-this-code-for-multiple-attributes-without-it-displaying-nan%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Your code isn't exactly reusable code, and there are some missing components, such as id attributes. The best way you're going to be able to reuse this code is by creating a function that generates the buttons for you, that way the scope of the add/sub functions is correct. Here's a pure JavaScript solution I created for you.
Also, it appears you're creating a game, possibly an RPG, in that case, I'd highly suggest you use a framework that designed around reusable components, such as React. And if you're not keen on that, at least jQuery to make element creation more enjoyable.
var stats = {
strength: 0,
agility: 1,
speed: 2
}
function disableButton (button, value) {
if (value <= 0) {
button.setAttribute('disabled', 'disabled');
} else {
button.removeAttribute('disabled');
}
}
function createButton(stat) {
const wrapperEl = document.createElement('section');
const labelEl = document.createElement('span');
const leftEl = document.createElement('button');
const valueEl = document.createElement('span');
const rightEl = document.createElement('button');
labelEl.innerText = ` ${stat}`;
valueEl.innerText = stats[stat];
leftEl.innerHTML = '-';
rightEl.innerHTML = '+';
leftEl.onclick = function () {
stats[stat]--;
valueEl.innerText = stats[stat];
disableButton(this, stats[stat]);
}
rightEl.onclick = function () {
stats[stat]++;
valueEl.innerText = stats[stat];
disableButton(leftEl, stats[stat]);
}
if (stats[stat] <= 0) {
leftEl.setAttribute('disabled', 'disabled');
}
wrapperEl.appendChild(leftEl);
wrapperEl.appendChild(valueEl);
wrapperEl.appendChild(rightEl);
wrapperEl.appendChild(labelEl);
return wrapperEl;
}
// Wrapped in DOMContentLoaded event listener
document.addEventListener("DOMContentLoaded", function(event) {
Object.keys(stats).forEach(function(stat) {
document.getElementById('stats').appendChild(createButton(stat))
});
});<section id="stats"></section>answered Nov 16 '18 at 3:00
AnonymousSBAnonymousSB
2,229221
thanks for the help, only problem is no buttons show. I've replaced the JS and that didn't work, I then removed the button HTML code and that just removed the buttons all together. Anything you could think of?
– Mr. Student.exe
Nov 19 '18 at 1:27
This solution generates all the HTML in JavaScript and puts it inside an element with theidofstats. If you're looking to just copy/paste this JS into your page, you'll need to remove all your button HTML and just put<section id="stats"></section>where it used to be.
– AnonymousSB
Nov 19 '18 at 1:40
I tried that and it just shows my background, I'll give it another shot.
– Mr. Student.exe
Nov 19 '18 at 1:45
So nothing shows, I've tried taking out just the table and button code, and the whole code, but nothing seems to be displaying.
– Mr. Student.exe
Nov 19 '18 at 1:50
Can you put your code on jsFiddle.net so I can see the full context?
– AnonymousSB
Nov 19 '18 at 2:18
|
show 8 more comments
0
Your code isn't exactly reusable code, and there are some missing components, such as id attributes. The best way you're going to be able to reuse this code is by creating a function that generates the buttons for you, that way the scope of the add/sub functions is correct. Here's a pure JavaScript solution I created for you.
Also, it appears you're creating a game, possibly an RPG, in that case, I'd highly suggest you use a framework that designed around reusable components, such as React. And if you're not keen on that, at least jQuery to make element creation more enjoyable.
var stats = {
strength: 0,
agility: 1,
speed: 2
}
function disableButton (button, value) {
if (value <= 0) {
button.setAttribute('disabled', 'disabled');
} else {
button.removeAttribute('disabled');
}
}
function createButton(stat) {
const wrapperEl = document.createElement('section');
const labelEl = document.createElement('span');
const leftEl = document.createElement('button');
const valueEl = document.createElement('span');
const rightEl = document.createElement('button');
labelEl.innerText = ` ${stat}`;
valueEl.innerText = stats[stat];
leftEl.innerHTML = '-';
rightEl.innerHTML = '+';
leftEl.onclick = function () {
stats[stat]--;
valueEl.innerText = stats[stat];
disableButton(this, stats[stat]);
}
rightEl.onclick = function () {
stats[stat]++;
valueEl.innerText = stats[stat];
disableButton(leftEl, stats[stat]);
}
if (stats[stat] <= 0) {
leftEl.setAttribute('disabled', 'disabled');
}
wrapperEl.appendChild(leftEl);
wrapperEl.appendChild(valueEl);
wrapperEl.appendChild(rightEl);
wrapperEl.appendChild(labelEl);
return wrapperEl;
}
// Wrapped in DOMContentLoaded event listener
document.addEventListener("DOMContentLoaded", function(event) {
Object.keys(stats).forEach(function(stat) {
document.getElementById('stats').appendChild(createButton(stat))
});
});<section id="stats"></section>answered Nov 16 '18 at 3:00
AnonymousSBAnonymousSB
2,229221
thanks for the help, only problem is no buttons show. I've replaced the JS and that didn't work, I then removed the button HTML code and that just removed the buttons all together. Anything you could think of?
– Mr. Student.exe
Nov 19 '18 at 1:27
This solution generates all the HTML in JavaScript and puts it inside an element with theidofstats. If you're looking to just copy/paste this JS into your page, you'll need to remove all your button HTML and just put<section id="stats"></section>where it used to be.
– AnonymousSB
Nov 19 '18 at 1:40
I tried that and it just shows my background, I'll give it another shot.
– Mr. Student.exe
Nov 19 '18 at 1:45
So nothing shows, I've tried taking out just the table and button code, and the whole code, but nothing seems to be displaying.
– Mr. Student.exe
Nov 19 '18 at 1:50
Can you put your code on jsFiddle.net so I can see the full context?
– AnonymousSB
Nov 19 '18 at 2:18
|
show 8 more comments
0
0
0
Your code isn't exactly reusable code, and there are some missing components, such as id attributes. The best way you're going to be able to reuse this code is by creating a function that generates the buttons for you, that way the scope of the add/sub functions is correct. Here's a pure JavaScript solution I created for you.
Also, it appears you're creating a game, possibly an RPG, in that case, I'd highly suggest you use a framework that designed around reusable components, such as React. And if you're not keen on that, at least jQuery to make element creation more enjoyable.
var stats = {
strength: 0,
agility: 1,
speed: 2
}
function disableButton (button, value) {
if (value <= 0) {
button.setAttribute('disabled', 'disabled');
} else {
button.removeAttribute('disabled');
}
}
function createButton(stat) {
const wrapperEl = document.createElement('section');
const labelEl = document.createElement('span');
const leftEl = document.createElement('button');
const valueEl = document.createElement('span');
const rightEl = document.createElement('button');
labelEl.innerText = ` ${stat}`;
valueEl.innerText = stats[stat];
leftEl.innerHTML = '-';
rightEl.innerHTML = '+';
leftEl.onclick = function () {
stats[stat]--;
valueEl.innerText = stats[stat];
disableButton(this, stats[stat]);
}
rightEl.onclick = function () {
stats[stat]++;
valueEl.innerText = stats[stat];
disableButton(leftEl, stats[stat]);
}
if (stats[stat] <= 0) {
leftEl.setAttribute('disabled', 'disabled');
}
wrapperEl.appendChild(leftEl);
wrapperEl.appendChild(valueEl);
wrapperEl.appendChild(rightEl);
wrapperEl.appendChild(labelEl);
return wrapperEl;
}
// Wrapped in DOMContentLoaded event listener
document.addEventListener("DOMContentLoaded", function(event) {
Object.keys(stats).forEach(function(stat) {
document.getElementById('stats').appendChild(createButton(stat))
});
});<section id="stats"></section>answered Nov 16 '18 at 3:00
AnonymousSBAnonymousSB
2,229221
Your code isn't exactly reusable code, and there are some missing components, such as id attributes. The best way you're going to be able to reuse this code is by creating a function that generates the buttons for you, that way the scope of the add/sub functions is correct. Here's a pure JavaScript solution I created for you.
Also, it appears you're creating a game, possibly an RPG, in that case, I'd highly suggest you use a framework that designed around reusable components, such as React. And if you're not keen on that, at least jQuery to make element creation more enjoyable.
var stats = {
strength: 0,
agility: 1,
speed: 2
}
function disableButton (button, value) {
if (value <= 0) {
button.setAttribute('disabled', 'disabled');
} else {
button.removeAttribute('disabled');
}
}
function createButton(stat) {
const wrapperEl = document.createElement('section');
const labelEl = document.createElement('span');
const leftEl = document.createElement('button');
const valueEl = document.createElement('span');
const rightEl = document.createElement('button');
labelEl.innerText = ` ${stat}`;
valueEl.innerText = stats[stat];
leftEl.innerHTML = '-';
rightEl.innerHTML = '+';
leftEl.onclick = function () {
stats[stat]--;
valueEl.innerText = stats[stat];
disableButton(this, stats[stat]);
}
rightEl.onclick = function () {
stats[stat]++;
valueEl.innerText = stats[stat];
disableButton(leftEl, stats[stat]);
}
if (stats[stat] <= 0) {
leftEl.setAttribute('disabled', 'disabled');
}
wrapperEl.appendChild(leftEl);
wrapperEl.appendChild(valueEl);
wrapperEl.appendChild(rightEl);
wrapperEl.appendChild(labelEl);
return wrapperEl;
}
// Wrapped in DOMContentLoaded event listener
document.addEventListener("DOMContentLoaded", function(event) {
Object.keys(stats).forEach(function(stat) {
document.getElementById('stats').appendChild(createButton(stat))
});
});<section id="stats"></section>var stats = {
strength: 0,
agility: 1,
speed: 2
}
function disableButton (button, value) {
if (value <= 0) {
button.setAttribute('disabled', 'disabled');
} else {
button.removeAttribute('disabled');
}
}
function createButton(stat) {
const wrapperEl = document.createElement('section');
const labelEl = document.createElement('span');
const leftEl = document.createElement('button');
const valueEl = document.createElement('span');
const rightEl = document.createElement('button');
labelEl.innerText = ` ${stat}`;
valueEl.innerText = stats[stat];
leftEl.innerHTML = '-';
rightEl.innerHTML = '+';
leftEl.onclick = function () {
stats[stat]--;
valueEl.innerText = stats[stat];
disableButton(this, stats[stat]);
}
rightEl.onclick = function () {
stats[stat]++;
valueEl.innerText = stats[stat];
disableButton(leftEl, stats[stat]);
}
if (stats[stat] <= 0) {
leftEl.setAttribute('disabled', 'disabled');
}
wrapperEl.appendChild(leftEl);
wrapperEl.appendChild(valueEl);
wrapperEl.appendChild(rightEl);
wrapperEl.appendChild(labelEl);
return wrapperEl;
}
// Wrapped in DOMContentLoaded event listener
document.addEventListener("DOMContentLoaded", function(event) {
Object.keys(stats).forEach(function(stat) {
document.getElementById('stats').appendChild(createButton(stat))
});
});<section id="stats"></section>var stats = {
strength: 0,
agility: 1,
speed: 2
}
function disableButton (button, value) {
if (value <= 0) {
button.setAttribute('disabled', 'disabled');
} else {
button.removeAttribute('disabled');
}
}
function createButton(stat) {
const wrapperEl = document.createElement('section');
const labelEl = document.createElement('span');
const leftEl = document.createElement('button');
const valueEl = document.createElement('span');
const rightEl = document.createElement('button');
labelEl.innerText = ` ${stat}`;
valueEl.innerText = stats[stat];
leftEl.innerHTML = '-';
rightEl.innerHTML = '+';
leftEl.onclick = function () {
stats[stat]--;
valueEl.innerText = stats[stat];
disableButton(this, stats[stat]);
}
rightEl.onclick = function () {
stats[stat]++;
valueEl.innerText = stats[stat];
disableButton(leftEl, stats[stat]);
}
if (stats[stat] <= 0) {
leftEl.setAttribute('disabled', 'disabled');
}
wrapperEl.appendChild(leftEl);
wrapperEl.appendChild(valueEl);
wrapperEl.appendChild(rightEl);
wrapperEl.appendChild(labelEl);
return wrapperEl;
}
// Wrapped in DOMContentLoaded event listener
document.addEventListener("DOMContentLoaded", function(event) {
Object.keys(stats).forEach(function(stat) {
document.getElementById('stats').appendChild(createButton(stat))
});
});<section id="stats"></section>answered Nov 16 '18 at 3:00
AnonymousSBAnonymousSB
2,229221
edited Nov 19 '18 at 2:52
answered Nov 16 '18 at 3:00
AnonymousSBAnonymousSB
2,229221
answered Nov 16 '18 at 3:00
AnonymousSBAnonymousSB
2,229221
answered Nov 16 '18 at 3:00
AnonymousSBAnonymousSB
2,229221
2,229221
thanks for the help, only problem is no buttons show. I've replaced the JS and that didn't work, I then removed the button HTML code and that just removed the buttons all together. Anything you could think of?
– Mr. Student.exe
Nov 19 '18 at 1:27
This solution generates all the HTML in JavaScript and puts it inside an element with theidofstats. If you're looking to just copy/paste this JS into your page, you'll need to remove all your button HTML and just put<section id="stats"></section>where it used to be.
– AnonymousSB
Nov 19 '18 at 1:40
I tried that and it just shows my background, I'll give it another shot.
– Mr. Student.exe
Nov 19 '18 at 1:45
So nothing shows, I've tried taking out just the table and button code, and the whole code, but nothing seems to be displaying.
– Mr. Student.exe
Nov 19 '18 at 1:50
Can you put your code on jsFiddle.net so I can see the full context?
– AnonymousSB
Nov 19 '18 at 2:18
|
show 8 more comments
thanks for the help, only problem is no buttons show. I've replaced the JS and that didn't work, I then removed the button HTML code and that just removed the buttons all together. Anything you could think of?
– Mr. Student.exe
Nov 19 '18 at 1:27
This solution generates all the HTML in JavaScript and puts it inside an element with theidofstats. If you're looking to just copy/paste this JS into your page, you'll need to remove all your button HTML and just put<section id="stats"></section>where it used to be.
– AnonymousSB
Nov 19 '18 at 1:40
I tried that and it just shows my background, I'll give it another shot.
– Mr. Student.exe
Nov 19 '18 at 1:45
So nothing shows, I've tried taking out just the table and button code, and the whole code, but nothing seems to be displaying.
– Mr. Student.exe
Nov 19 '18 at 1:50
Can you put your code on jsFiddle.net so I can see the full context?
– AnonymousSB
Nov 19 '18 at 2:18
thanks for the help, only problem is no buttons show. I've replaced the JS and that didn't work, I then removed the button HTML code and that just removed the buttons all together. Anything you could think of?
– Mr. Student.exe
Nov 19 '18 at 1:27
thanks for the help, only problem is no buttons show. I've replaced the JS and that didn't work, I then removed the button HTML code and that just removed the buttons all together. Anything you could think of?
– Mr. Student.exe
Nov 19 '18 at 1:27
This solution generates all the HTML in JavaScript and puts it inside an element with the
id of stats. If you're looking to just copy/paste this JS into your page, you'll need to remove all your button HTML and just put <section id="stats"></section> where it used to be.– AnonymousSB
Nov 19 '18 at 1:40
This solution generates all the HTML in JavaScript and puts it inside an element with the
id of stats. If you're looking to just copy/paste this JS into your page, you'll need to remove all your button HTML and just put <section id="stats"></section> where it used to be.– AnonymousSB
Nov 19 '18 at 1:40
I tried that and it just shows my background, I'll give it another shot.
– Mr. Student.exe
Nov 19 '18 at 1:45
I tried that and it just shows my background, I'll give it another shot.
– Mr. Student.exe
Nov 19 '18 at 1:45
So nothing shows, I've tried taking out just the table and button code, and the whole code, but nothing seems to be displaying.
– Mr. Student.exe
Nov 19 '18 at 1:50
So nothing shows, I've tried taking out just the table and button code, and the whole code, but nothing seems to be displaying.
– Mr. Student.exe
Nov 19 '18 at 1:50
Can you put your code on jsFiddle.net so I can see the full context?
– AnonymousSB
Nov 19 '18 at 2:18
Can you put your code on jsFiddle.net so I can see the full context?
– AnonymousSB
Nov 19 '18 at 2:18
|
show 8 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53330316%2fhow-do-i-duplicate-this-code-for-multiple-attributes-without-it-displaying-nan%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You don't duplicate the code in the first place; what you do is write reusable code: jsfiddle.net/khrismuc/3u2kfLn5
– Chris G
Nov 16 '18 at 2:06
So your code works in JSfiddle, but as soon as I move it into my code, the buttons won't work
– Mr. Student.exe
Nov 19 '18 at 2:15
The JS code has to run after the buttons already exist; in case you have the
<script>in the document's<head>, move it to the end of<body>instead, right before</body>.– Chris G
Nov 19 '18 at 11:10