I'm new to creating webpage. I was stuck in this part, where there are three link (should be visible) and three textbox(should be invisible) as default .
When I click one link only that respective text field should visible. if I click another link previous field should hide and it's respective text field should be visible.
Example
If click student link the respective student div should visible then if I click parent then previously student div should hide and parent div must visible.
This is my sample code.
<div>
<ul class="role" id="role">
<li class="selected">
student
</li>
< li>|</li>
<li class="">
teacher
</li>
<li>|</li>
<li class="">
parent
</li>
</ul>
</div>
<div class="block" id="student">
<input type="text" name="stud" id="Stud">
</div>
<div class="block" id="teacher">
<input type="text" name="teach" id="Teach">
</div>
<div class="block" id="parent">
<input type="text" name="par" id="par">
</div>
I think this is what you want.
var student = document.getElementById("student_tab");
var teacher = document.getElementById("teacher_tab");
var parent = document.getElementById("parent_tab");
var b_Stud = document.getElementById("Stud");
var b_Teach = document.getElementById("Teach");
var b_par = document.getElementById("par");
function clear() {
b_Stud.style.display = "none";
b_Teach.style.display = "none";
b_par.style.display = "none";
}
function show(type) {
switch (type) {
case "student_tab":
b_Stud.style.display = "block";
break;
case "teacher_tab":
b_Teach.style.display = "block";
break;
case "parent_tab":
b_par.style.display = "block";
break;
default:
break;
}
}
student.addEventListener("click", function(e) {
clear();
show(e.target.id);
});
teacher.addEventListener("click", function(e) {
clear();
show(e.target.id);
});
parent.addEventListener("click", function(e) {
clear();
show(e.target.id);
});
<div>
<ul class="role" id="role">
<li class="selected">
student
</li>
<li class="">
teacher
</li>
<li class="">
parent
</li>
</ul>
</div>
<div class="block" id="student">
<input type="text" name="stud" id="Stud" placeholder="Stud" />
</div>
<div class="block" id="teacher">
<input type="text" name="teach" id="Teach" placeholder="Teach" />
</div>
<div class="block" id="parent">
<input type="text" name="par" id="par" placeholder="par" />
</div>
Check this out.
const studentInput = document.getElementById("Stud");
const teacherInput = document.getElementById("Teach");
const parentInput = document.getElementById("par");
const links = document.querySelectorAll('a');
const hideInputs = () => {
const inputs = document.querySelectorAll('input');
inputs.forEach(input => input.classList.remove("active"));
}
const showElement = (e) => {
if(e.target.textContent === "parent") {
hideInputs();
parentInput.classList.add("active");
} else if(e.target.textContent === "student") {
hideInputs();
studentInput.classList.add("active");
} else if(e.target.textContent === "teacher") {
hideInputs();
teacherInput.classList.add("active");
}
}
links.forEach(link => link.addEventListener('click', (e) => showElement(e)))
input {
display: none;
}
input.active {
display: block;
}
<div>
<ul class="role" id="role">
<li class="selected">
student
</li>
<li class="">
teacher
</li>
<li class="">
parent
</li>
</ul>
</div>
<div class="block" id="student">
<input type="text" name="stud" id="Stud" placeholder="student" class="active">
</div>
<div class="block" id="teacher">
<input type="text" name="teach" id="Teach" placeholder="teacher">
</div>
<div class="block" id="parent">
<input type="text" name="par" id="par" placeholder="parent">
</div>
Related
Hi im really new to javascript and stuck on a textbook exercise where I increase the increment of variable i by 1 to be able to continuing listing the inputs. Here is my code so far, can anyone guid me on what I am doing incorrect thank you
<body>
<header>
<h1>
Project 2 Test 1
</h1>
</header>
<article>
<div id="results">
<ul>
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
</ul>
<p id="resultsExp"></p>
</div>
<form>
<fieldset>
<label for="wishList" id="placeLabel">
Type the name of a wish list item, then click Submit:
</label>
<input type="text" id="wishList" />
</fieldset>
<fieldset>
<button type="button" id="button">Submit</button>
</fieldset>
</form>
</article>
<script>
i = 1;
listitem = "";
function processitems() {
if (i<= 5) {
listitem ="item" +i;
document.getElementById(listitem).innerHTML = document.getElementById("wishList").value;
document.getElementById("wishlist").value ="";
if (i===5) {
document.getElementById("resultsExp").innerHTML = "Your wish list has been submitted";
}
//inside the processitems() function of the main if statement, after the nested if statement, add a statement to increment the value of i by 1.
i =+1;
}
}
var btn = document.getElementById("button");
if (btn.addEventListener) {
btn.addEventListener("click", processitems, false);
} else if (btn.attachEvent) {
btn.attachEvent("onclick", processitems);
}
</script>
i =+1; is assigning 1 to i. You should be doing i += 1 instead:
<body>
<header>
<h1>
Project 2 Test 1
</h1>
</header>
<article>
<div id="results">
<ul>
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
</ul>
<p id="resultsExp"></p>
</div>
<form>
<fieldset>
<label for="wishList" id="placeLabel">
Type the name of a wish list item, then click Submit:
</label>
<input type="text" id="wishList" />
</fieldset>
<fieldset>
<button type="button" id="button">Submit</button>
</fieldset>
</form>
</article>
<script>
i = 1;
listitem = "";
function processitems() {
if (i <= 5) {
listitem = "item" + i;
document.getElementById(listitem).innerHTML = document.getElementById("wishList").value;
document.getElementById("wishList").value = "";
if (i === 5) {
document.getElementById("resultsExp").innerHTML = "Your wish list has been submitted";
}
//inside the processitems() function of the main if statement, after the nested if statement, add a statement to increment the value of i by 1.
i += 1;
}
}
var btn = document.getElementById("button");
if (btn.addEventListener) {
btn.addEventListener("click", processitems, false);
} else if (btn.attachEvent) {
btn.attachEvent("onclick", processitems);
}
</script>
Hello so I have tabs using javascript:
function openScreen(screen, button) {
let i;
const tabContent = document.getElementsByClassName("tab-content");
const tabButton = document.getElementsByClassName("tab-button");
for (i = 0; i < tabContent.length; i++) {
tabContent[i].style.display = "none";
}
document.getElementById(screen).style.display = "block";
for (i = 0; i < tabButton.length; i++) {
tabButton[i].classList.remove('active');
}
document.getElementById(button).classList.add('active');
}
<div class="tab-links">
<button id="login-button" class="active tab-button" onclick="openScreen('Login', 'login-button')">Login</button>
<button id="register-button" class="tab-button" onclick="openScreen('Register', 'register-button')">Register</button>
</div>
<div>
<div id="Login" class="tab-content">
<p>Login</p>
</div>
<div id="Register" class="tab-content" style="display:none">
<p>Register</p>
</div>
</div>
And this is working, but I want to do this without passing any parameters to function and do it without using onclick function. But I dont image how I should achieve this.
This is a perfect task for event delegation. You register one even listener for the click event on the element that wraps the buttons and the content. In that event listener, you can use e.target is the element from which the event originated. e.currentTarget is the one on which the listener was attached.
In the listener, you need to figure out if it was really the button. Which could be done by checking for a certain property (in this case for the data-target attribute)
function openScreen(tabContainer, button) {
// remove active class from tab-content and tab-button in the current tab container
tabContainer.querySelectorAll(".tab-content.active, .tab-button.active").forEach(elm => {
elm.classList.remove('active');
})
// add the active class to the button and the container set by the target
let screen = button.dataset.target;
document.getElementById(screen).classList.add('active');
button.classList.add('active');
}
// Add the delegate event listener to all tab-conainers
document.querySelectorAll(".tab-container").forEach(container => {
container.addEventListener('click', (e) => {
// check if the event happened on an element with the `data-target` attribute
if (e.target.dataset.target) {
const tabContainer = e.currentTarget
const button = e.target
openScreen(tabContainer, button)
}
})
})
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
<div class="tab-container">
<div class="tab-links">
<button id="login-button" data-target="Login" class="tab-button active">Login</button>
<button id="register-button" data-target="Register" class="tab-button">Register</button>
</div>
<div>
<div id="Login" class="tab-content active">
<p>Login</p>
</div>
<div id="Register" class="tab-content">
<p>Register</p>
</div>
</div>
</div>
<hr>
<div class="tab-container">
<div class="tab-links">
<button id="login-button2" data-target="Login2" class="tab-button active">Login2</button>
<button id="register-button2" data-target="Register2" class="tab-button">Register2</button>
</div>
<div>
<div id="Login2" class="tab-content active">
<p>Login2</p>
</div>
<div id="Register2" class="tab-content">
<p>Register2</p>
</div>
</div>
</div>
You can do it with data attributes https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
short example
<div class="tab" data-type="login"></div>
<div class="tab" data-type="register"></div>
Then
const tabs = document.querySelectorAll('.tab');
for (let tab of tabs) {
tab.onclick = function () {
const type = this.dataset.type;
/*now you can do all needed actions*/
}
}
Do you mean something like this?
function openScreen(e) {
const button = e.target;
const { screen } = button.dataset;
const tabs = document.querySelectorAll('.tab-content');
tabs.forEach(tab => tab.classList.toggle('active', screen === tab.id));
}
const buttons = document.querySelectorAll('button');
buttons.forEach(button => button.addEventListener('click', openScreen));
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
<div class="tab-links">
<button
id="login-button"
class="active tab-button"
data-screen="Login"
>Login</button>
<button
id="register-button"
class="tab-button"
data-screen="Register"
>Register</button>
</div>
<div>
<div id="Login" class="tab-content active">
<p>Login</p>
</div>
<div id="Register" class="tab-content">
<p>Register</p>
</div>
</div>
as your request. not passing any parameter. let me know at comment section if something doesn't work correctly.
$('#login-button').click(function(){
switchTab( $(this), $('#Login') );
});
$('#register-button').click(function(){
switchTab( $(this), $('#Register') );
});
function switchTab(this_, target_){
$('.tab-content').hide();
target_.show();
$('.tab-button').removeClass('active');
this_.addClass('active');
}
button.active{
border:1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-links">
<button id="login-button" class="active tab-button">Login</button>
<button id="register-button" class="tab-button">Register</button>
</div>
<div>
<div id="Login" class="tab-content">
<p>Login</p>
</div>
<div id="Register" class="tab-content" style="display:none">
<p>Register</p>
</div>
</div>
I am trying to click on await page.click('.2 tabBtnCenter');, but it is not working.
Can someone define a proper Puppeteer CSS selector for value=2 tabBtnCenter?
<div id="headerTab">
<ul>
<li value="0">
<div class="tabBtnLeft"></div>
<div class="tabBtnCenter">Status</div>
<div class="tabBtnRight"></div>
</li>
<li value="1">
<div class="tabBtnLeft"></div>
<div class="tabBtnCenter">WAN</div>
<div class="tabBtnRight"></div>
</li>
<li value="2">
<div class="tabBtnLeft"></div>
<div class="tabBtnCenter">LAN</div>
<div class="tabBtnRight"></div>
</li>
</ul>
</div>
You can use the following selector to click the element you specified with page.click():
await page.click('[value="2"] > .tabBtnCenter');
Using xpath :
const sel = await page.$x("//div[text()='LAN' and #class='tabBtnCenter']");
if (sel.length > 0) {
await sel[0].click();
}
else {
throw new Error("selector not found");
}
showfavstar(val)
{
this.favstar = true;
}
<ul class="listboxtickets">
<li class="selectlistticket" *ngFor="let fav of favlist" (mouseover)="showfavstar(fav.req_id)" (mouseleave)="hidefavstar()">
<div class="atickname" (click)="timetracker(fav.req_id,fav.ticket_summary,fav.time_logged*60*1000)"> {{fav.ticket_summary.substring(0,20)}} </div>
<div> {{fav.time_logged} </div>
<div class="atickstat" [hidden]="!favstar"> <img class="staraimg" src="assets/images/star_icon.png" (click)="removefav(fav.req_id)"/> </div>
<div class="namelinet"> <img src="assets/images/text_bottomline.png"/> </div>
</li>
</ul>
I want to show star image for only hovered list?Now i get all the star images
This cannot be achived using single variable which you took here i.e favstar.
Try your code like this
<ul class="listboxtickets">
<li class="selectlistticket" *ngFor="let fav of favlist" (mouseover)="showfavstar(fav)" (mouseleave)="hidefavstar(fav)">
<div class="atickname" (click)="timetracker(fav.req_id,fav.ticket_summary,fav.time_logged*60*1000)">
{{fav.ticket_summary.substring(0,20)}}
</div>
<div> {{fav.time_logged} </div>
<div class="atickstat" [hidden]="!fav?.Show">
<img class="staraimg" src="assets/images/star_icon.png" (click)="removefav(fav.req_id)"/>
</div>
<div class="namelinet"> <img src="assets/images/text_bottomline.png"/> </div>
</li>
</ul>
showfavstar(fav){
fav.Show = true;
for(let i = 0; i < this.favlist.length; i++){
this.favlist[i].Show = false;
}
}
hidefavstar(val){
fav.Show = true;
for(let i = 0; i < this.favlist.length; i++){
this.favlist[i].Show = true;
}
}
When I click on a particular tab the other tabs's content should be hidden but it is not hiding. This is all the code I have.
function showStuff(id) {
if (document.getElementById(id).style.display === "block") {
document.getElementById(id).style.display = "none";
} else {
document.getElementById(id).style.display = "block";
}
}
<ul class="side bar tabs">
<li id="tabs1" onclick="showStuff('tabs-1')">City</li>
<li id="tabs2" onclick="showStuff('tabs-2')">Country</li>
<li id="tabs3" onclick="showStuff('tabs-3')">Humanity</li>
</ul>
<div id="tabs-1" style="display : none">
<p>Proin elit m</p>
</div>
<div id="tabs-2" style="display : none">
<p>M massa ut d</p>
</div>
<div id="tabs-3" style="display : none">
<p> sodales.</p>
</div>
Giving all the tab content elements a common CSS class makes selecting and styling them much easier, for example in this demo and code below.
CSS
.tabContent {
display:none;
}
JavaScript
function showStuff(element) {
var tabContents = document.getElementsByClassName('tabContent');
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].style.display = 'none';
}
// change tabsX into tabs-X in order to find the correct tab content
var tabContentIdToShow = element.id.replace(/(\d)/g, '-$1');
document.getElementById(tabContentIdToShow).style.display = 'block';
}
HTML
<ul class="side bar tabs">
<li id="tabs1" onclick="showStuff(this)">City</li>
<li id="tabs2" onclick="showStuff(this)">Country</li>
<li id="tabs3" onclick="showStuff(this)">Humanity</li>
</ul>
<div id="tabs-1" class="tabContent">
<p>Proin elit m</p>
</div>
<div id="tabs-2" class="tabContent">
<p>M massa ut d</p>
</div>
<div id="tabs-3" class="tabContent">
<p> sodales.</p>
</div>
I have also updated the showElement function to be more generic so that there is less code duplication when hiding and showing the correct tab content.
The only caveat is that getElementsByClassName() is not available in IE8 or below. Other (modern) browsers have this function but there are alternatives - see getElementsByClassName & IE8: Object doesn't support this property or method.
You have to first set a display: none for all of your tab contents.
e. g.
<script type="text/javascript">
function showTab(selected, total)
{
for(i = 1; i <= total; i += 1)
{
document.getElementById('tabs-' + i).style.display = 'none';
}
document.getElementById('tabs-' + selected).style.display = 'block';
}
</script>
<div id="tabs-1" style="display: none">tab1</div>
<div id="tabs-2" style="display: none">tab2</div>
<div id="tabs-3" style="display: none">tab3</div>
<ul class="side bar tabs">
<li id = "tabs1" onclick = "showTab(1,3)">City</li>
<li id = "tabs2" onclick = "showTab(2,3)">Country</li>
<li id = "tabs3" onclick = "showTab(3,3)">Humanity</li>
</ul>
If there is something like this with your code, I'm sure that it's going to work. BTW, Check your Console window for JavaScript errors.
you can try this
function showStuff(id){
$('#tabs1').empty();
$('#tab2').show();
}
or the other way
I think that this should do it:
<ul class="side bar tabs">
<li id = "tabs1" onclick = "showStuff('tabs-1')">City</li>
<li id = "tabs2" onclick = "showStuff('tabs-2')">Country</li>
<li id = "tabs3" onclick = "showStuff('tabs-3')">Humanity</li>
</ul>
<script type="text/javascript">
function showStuff (id)
{
document.getElementById("tabs-1").style.display = "none";
document.getElementById("tabs-2").style.display = "none";
document.getElementById("tabs-3").style.display = "none";
document.getElementById(id).style.display = "block";
}
</script>
<div id="tabs-1" style="display:none">tabs 1 content</div>
<div id="tabs-2" style="display:none">tabs 2 content</div>
<div id="tabs-3" style="display:none">tabs 3 content</div>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<div id="tabs">
<ul>
<li>City</li>
<li>Country</li>
<li>Humanity</li>
</ul>
<div id="tabs-1">..............</div>
<div id="tabs-2">..............</div>
<div id="tabs-3">..............</div>
</div>