/    Sign up×
Community /Pin to ProfileBookmark

Add incremental value to an id of the body tag

Copy linkTweet thisAlerts:
Oct 15.2021

Hi all,
I’ve got a series of questions and im after having that every time the next button is clicked, the value to that is added to the body tag as an id, so that i can use this as a CSS hook, so they i can style it to let the user know what question they are on but im having trouble accomplishing this…

Here is an example of the body tag im after:
`<body id=”question_[incrementaing value]”>`

Here is the ‘next’ button im using to hopefully send the value:
`<a value=”0″>Next Question</a>`

Here is the code below, i’ve got to work when writing it to the console but i don’t know how to write it to the body tag as an ID:
`<script type=”text/javascript”>
var i = 0;
function Next_Question() {
var NextQ = document.getElementById(“Next”);
document.getElementById(‘Next’).value = ++i;
console.log(i+”_next”);

}
</script>`

Any pointers would be greatly appreciated..

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@tracknutOct 15.2021 — I'm not really a fan of using the ID like this. What about using a data- attribute instead, like this?
<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;sibert&lt;/title&gt;
&lt;style&gt;
.question1,
.question2 {display:none}
#questions:not([data-q="0"]) .question0 {display:none}
#questions[data-q="1"] .question1 {display:inherit}
#questions[data-q="2"] .question2 {display:inherit}
&lt;/style&gt;
&lt;/head&gt;

&lt;body id="questions" data-q="0"&gt;
&lt;p class="question0"&gt;Press NEXT to start questionaire&lt;/p&gt;
&lt;p class="question1"&gt;What's your name?&lt;/p&gt;
&lt;p class="question2"&gt;What's your address?&lt;/p&gt;

<i> </i>&lt;button&gt;Next&lt;/button&gt;

<i> </i>&lt;script type="text/javascript"&gt;
<i> </i> var NextQ = document.getElementById("questions");
<i> </i> NextQ.addEventListener("click", Next_Question);
<i> </i> function Next_Question() {
<i> </i> var q = NextQ.getAttribute("data-q");
<i> </i> NextQ.setAttribute("data-q",++q);
<i> </i> }
<i> </i>&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@JMRKEROct 19.2021 — I would avoid adding IDs without knowing what the limit would be.

Here is an alternate suggestion:

``<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/&gt;
&lt;title&gt; Test Page &lt;/title&gt;
&lt;!-- From: https://www.webdeveloper.com/d/397225-add-incremental-value-to-an-id-of-the-body-tag/2 --&gt;
&lt;style&gt;
.hide { display: none; }
&lt;/style&gt;

&lt;/head&gt;&lt;body&gt;
&lt;p&gt;Press NEXT to start/continue questionaire&lt;/p&gt;
&lt;button id="Next" onclick="showQuestions()"&gt; Next &lt;/button&gt;
&lt;p/&gt; &lt;div id="questions"&gt;&lt;/div&gt;
&lt;p/&gt; &lt;input id="responses" value="" class="hide"&gt;

&lt;script&gt;
const questions = [
'What is your name?',
'What is your street address?',
'What is your city?',
'What is your state?',
'What is your zipcode?',
];
var qno = 0, responses = [];

function showQuestions() {
if (qno &lt; questions.length) {
document.getElementById('questions').textContent = questions[qno];
document.getElementById('responses').classList.remove('hide');
// collect user 'responses' to questions and store into array (or object)
responses.push(document.getElementById('responses').value);
document.getElementById('responses').value = '';
document.getElementById('responses').focus();
qno++;
} else {
if (qno == questions.length) { qno++;
responses.push(document.getElementById('responses').value);
document.getElementById('responses').classList.add('hide');
// could include questions display before responses here
document.getElementById('questions').innerHTML = 'Responses&lt;br&gt;' + responses.join('&lt;p/&gt;');
}
}
}
&lt;/script&gt;
&lt;/body&gt;&lt;/html&gt;<i>
</i>``
Copy linkTweet thisAlerts:
@D_AzzopardiauthorOct 19.2021 — Hi there,

Thank you both for your indepth replies...I have a sense that i've either not explained the question properly or im not aware of the difficulty i am facing in sort this problem..

There is 1 known unknow;

the amount of questions will be less than 100..

so in theory i can create styles like;

question_1 { insert style here}_

question_2 { insert style here}_

etc and so on..

I just need to send/updated the existing ID with the incremented value i get everytime anchor link ''next" is pressed,

my plan is to simply highlight the question the user on at that time because the number of questions will be made visible and the user can check the progress..

Again really thanks for your help..what i will do then. Is try to complete a simple small scaled version, and get that to work...

Thank you both..
×

Success!

Help @D_Azzopardi spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.26,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...