I am having a problem to find a selector for the text inside my "li" to target with JavaScript. The problem is that I have a nested "span" element with two icons in my "li". That gives me a problem just to "li" to target it, since, it also covers the "span" with icons. What I am trying to do is add {text-decoration: 'line-through'} when the 'check' icon is clicked. and remove the text, when 'trash'icon is clicked. As I said, my problem is targeting the text within the "li" .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<title>To Do List</title>
</head>
<body>
<div class="container">
<div class="list-container">
<h1>Task List</h1>
<form id="addTask">
<input type="text" id="InputText" placeholder="Enter your task..." />
</form>
<div class="task-list">
<ul>
<li>
<span id="iconPkg"
><i class="fas fa-check"></i> <i class="fas fa-trash-alt"></i
></span>
</li>
</ul>
</div>
</div>
</div>
<button class="btn">Clear List</button>
<script src="app.js"></script>
</body>
</html>
app.js
const inputText = document.querySelector("#InputText");
const addTask = document.querySelector("#addTask");
const taskList = document.querySelector(".task-list");
const iconPkg = document.querySelector("#iconPkg");
const crossOut = document.querySelector(".fa-check");
const deleteItem = document.querySelector(".fa-trash-alt");
let LIText = document.querySelector(".task-list > ul > li:first-child");
addTask.addEventListener("submit", (e) => {
e.preventDefault();
taskList.innerHTML += `
<div class="task-list">
<ul>
<li>${inputText.value}
<span
><i class="fas fa-check"></i> <i class="fas fa-trash-alt"></i
></span>
</li>
</ul>
</div>
`;
iconPkg.removeAttribute("display");
inputText.value = "";
});
crossOut.addEventListener("click", () => {
LIText.style.textDecoration = "lineThrough";
});
I appreciate your help.
You can only select elements and pseudo-elements/classes. Therefore you must wrap it in an element. A span element should do the trick in this case:
const inputText = document.querySelector("#InputText");
const addTask = document.querySelector("#addTask");
const taskList = document.querySelector(".task-list");
const iconPkg = document.querySelector("#iconPkg");
const crossOut = document.querySelector(".fa-check");
const deleteItem = document.querySelector(".fa-trash-alt");
let LIText = document.querySelector(".task-list > ul > li > span");
addTask.addEventListener("submit", (e) => {
e.preventDefault();
taskList.innerHTML += `
<div class="task-list">
<ul>
<li><span>${inputText.value}</span>
<span
><i class="fas fa-check"></i> <i class="fas fa-trash-alt"></i
></span>
</li>
</ul>
</div>
`;
iconPkg.removeAttribute("display");
inputText.value = "";
});
crossOut.addEventListener("click", () => {
LIText.style.textDecoration = "line-through";
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<title>To Do List</title>
</head>
<body>
<div class="container">
<div class="list-container">
<h1>Task List</h1>
<form id="addTask">
<input type="text" id="InputText" placeholder="Enter your task..." />
</form>
<div class="task-list">
<ul>
<li><span>Some text</span>
<span id="iconPkg"
><i class="fas fa-check"></i> <i class="fas fa-trash-alt"></i
></span>
</li>
</ul>
</div>
</div>
</div>
<button class="btn">Clear List</button>
<script src="app.js"></script>
</body>
</html>
Related
When click on save button function myfunc2 will be exceuted which use a for in loop to iterate the minus array. This array conatain all the minus icon. i set style.display = 'none' and expect when i click the save button the icon will disappear, but it didn't work. i dont know what went wrong
const minus = document.getElementsByClassName('minus');
const item = document.getElementsByClassName('item');
const input = document.getElementsByTagName('input');
//right
const save_btn = document.getElementById('save');
save_btn.addEventListener('click',myfunc2);
//delete all minus
function myfunc2() {
for(let x in minus) {
minus[x].style.display = 'none';
}
}
* {
box-sizing: border-box;
}
.fa {
padding: 5px;
border-radius: 50%;
border: 1px solid blue;
}
.item {
gap: 10px;
}
a:hover {
cursor: pointer;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--font awe-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--bs-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!--js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container mt-3">
<h1>Bucket list</h1>
<button type="submit" class="btn btn-primary mb-3">Add item</button>
<form>
<!--d-flex overide item-->
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<button type="submit" class="btn btn-success save">Save</button>
<button type="submit" class="btn btn-danger">Edit</button>
</form>
</div>
<script src="js.js"></script>
</body>
</html>
There are 2 things you are doing wrong. First of all,
const save_btn = document.getElementByClassName('save');
should be
const save_btn = document.getElementsByClassName('save');
Secondly, save_btn would now be an array since you have gotten multiple elements by class name (hence the getElementsByClassName) plural form.
The getElementsByClassName method of Document interface returns an array-like object of all child elements which have all of the given class name(s). (doc)
So calling save_btn.addEventListener('click',myfunc2); wouldn't work since you are trying to assign this to an array. You either use
save_btn[0].addEventListener('click',myfunc2);
or, a more recommended approach, give the button an id and use getElementById() (doc)
Changed snippet below:
const minus = document.getElementsByClassName('minus');
const item = document.getElementsByClassName('item');
const input = document.getElementsByTagName('input');
//right
const save_btn = document.getElementById('saveBtn');
save_btn.addEventListener('click', myfunc2);
//delete all minus
function myfunc2() {
[].forEach.call(minus, function(m) {
m.style.display = 'none';
});
}
* {
box-sizing: border-box;
}
.fa {
padding: 5px;
border-radius: 50%;
border: 1px solid blue;
}
.item {
gap: 10px;
}
a:hover {
cursor: pointer;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--font awe-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--bs-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!--js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container mt-3">
<h1>Bucket list</h1>
<button type="submit" class="btn btn-primary mb-3">Add item</button>
<form>
<!--d-flex overide item-->
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<button type="button" id="saveBtn" class="btn btn-success save">Save</button>
<button type="submit" class="btn btn-danger">Edit</button>
</form>
</div>
<script src="js.js"></script>
</body>
</html>
I am fetching data from an external API which is an array of objects(each objects contain Details of harry potter movie character and there are 50 objects) I am using foreach loop to iterate through array so that I can show every object in my browser I am using Bootstrap 4 rows and columns method, now I want first object from array to show in first row first column and second object in first row second column, similarly third object in second row first column fourth object in second row second column and so on. how can I Achieve this with bootstrap 4 ?
**HTML file**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<title>harry poter</title>
</head>
<body>
<div class="gap">
<h1 class="font-weight-bold text-dark">
✨Harry Potter Characters✨
</h1>
</div>
<div class="form-group gap-1">
<input
type="search"
class="form-control"
placeholder="search for character"
/><i class="fas fa-search search"></i>
</div>
<div class="container gap-2">
<ul id="hpcharacters"></ul>
</div>
<script src="main.js"></script>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</body>
</html>
JAVASCRIPT file
const hpCharacters = document.querySelector("#hpcharacters");
async function getHpCharacters() {
const res = await fetch("http://hp-api.herokuapp.com/api/characters");
const data = await res.json();
let output = "";
data.forEach((user) => {
output += `
<div class="row">
<div class="col-5">
<div class="row">
<div class="col-sm-5">
<li> ACTOR:${user.actor}</li>
<li> NAME:${user.name}</li>
<li> HOUSE:${user.house}</li>
</div>
<div class="col-sm-5"">
<img src="${user.image}" class="img-fluid">
</div>
</div>
</div>
<div class="col-5">
<div class="row">
<div class="col-sm-5">
<li> ACTOR:${user.actor}</li>
<li> NAME:${user.name}</li>
<li> HOUSE:${user.house}</li>
</div>
<div class="col-sm-5"">
<img src="${user.image}" class="img-fluid">
</div>
</div>
</div>
</div>
</div>`;
});
hpCharacters.innerHTML = output;
}
getHpCharacters();
hpCharacters.innerHTML = output;
This line always overwrite the previous rows. So, you might want to use something hpCharacters.insertAdjacentElement('afterend',output). But hpCharacters is an tag. Why do you want to put rows (which is a div) inside an ul tag? That is not the appropriate way to do it.
I've created a helper function getCharacterHTML that returns HTML of a column if object exist in data and used for-loop instead of forEach to make it simple and get increment by i += 2.
const hpCharacters = document.querySelector("#hpcharacters");
function getCharacterHTML(data, i) {
const obj = data[i];
if (!obj) return "";
return `
<div class="col-5">
<div class="container">
<div class="row">
<div class="col-sm-5">
<li> ACTOR:${obj.actor}</li>
<li> NAME:${obj.name}</li>
<li> HOUSE:${obj.house}</li>
</div>
<div class="col-sm-5"">
<img src=" ${obj.image}" class="img-fluid" />
</div>
</div>
</div>
</div>
`;
}
async function getHpCharacters() {
const res = await fetch("http://hp-api.herokuapp.com/api/characters");
const data = await res.json();
let output = "";
for (let i = 0; i < data.length; i += 2) {
output += `
<div class="row">
${getCharacterHTML(data, i)}
${getCharacterHTML(data, i + 1)}
</div>
`;
}
hpCharacters.innerHTML = output;
}
getHpCharacters();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
<title>harry potter</title>
</head>
<body>
<div class="gap">
<h1 class="font-weight-bold text-dark">
✨Harry Potter Characters✨
</h1>
</div>
<div class="form-group gap-1">
<input type="search" class="form-control" placeholder="search for character" /><i class="fas fa-search search"></i>
</div>
<div class="container gap-2">
<ul id="hpcharacters"></ul>
</div>
<script src="main.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I'm creating a to do list with html and JavaScript. I'm trying to create an alert for a blank task, but no alert is popping up and no errors in the console. I actually click inside of the input box, but don't type anything and leave the field blank. Then I click 'Add Task', but don't receive the alert.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Task List</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col s12">
<div id="main" class="card">
<div class="card-content">
<span class="card-title">Task List</span>
<div class="row">
<for id="task-form">
<div class="input-field col s12">
<input type="text" name="task" id="task">
<label for="task">New Task</label>
</div>
<input type="submit" value="Add Task" class="btn">
</for>
</div>
</div>
<div class="card-action">
<h5 id="task-title">Tasks</h5>
<div class="input-field col s12">
<input type="text" name="filter" id="filter">
<label for="filter">Filter Tasks</label>
</div>
<ul class="collection"></ul>
Clear Tasks
</div>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="app.js"></script>
</html>
JavaScript:
// Define ui variables
const form = document.querySelector('#task-form');
const taskList = document.querySelector('.collection');
const clearBtn = document.querySelector('.clear-tasks');
const filter = document.querySelector('#filter');
const taskInput = document.querySelector('#task');
// Load all event listeners
loadEventListeners();
// Load all event listeners
function loadEventListeners() {
// Add task event
form.addEventListener('submit', addTask);
}
// Add Task
function addTask(e) {
if(taskInput.value === ''){
alert('Add a task');
}
e.preventDefault();
}
I believe you mistyped form. It should be <form id="task-form"> instead of <for id="task-form"> so the proper events aren't getting called.
// Define ui variables
const form = document.querySelector('#task-form');
const taskList = document.querySelector('.collection');
const clearBtn = document.querySelector('.clear-tasks');
const filter = document.querySelector('#filter');
const taskInput = document.querySelector('#task');
// Load all event listeners
loadEventListeners();
// Load all event listeners
function loadEventListeners() {
// Add task event
form.addEventListener('submit', addTask);
}
// Add Task
function addTask(e) {
if(taskInput.value === ''){
alert('Add a task');
}
e.preventDefault();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Task List</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col s12">
<div id="main" class="card">
<div class="card-content">
<span class="card-title">Task List</span>
<div class="row">
<form id="task-form">
<div class="input-field col s12">
<input type="text" name="task" id="task">
<label for="task">New Task</label>
</div>
<input type="submit" value="Add Task" class="btn">
</form>
</div>
</div>
<div class="card-action">
<h5 id="task-title">Tasks</h5>
<div class="input-field col s12">
<input type="text" name="filter" id="filter">
<label for="filter">Filter Tasks</label>
</div>
<ul class="collection"></ul>
Clear Tasks
</div>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="app.js"></script>
</html>
How to disable a bootstrap div which uses button class. Button to be disabled using javascript based on some conditions
This is my code for button which is to be disabled using js:
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-info col-sm-3">
<i class="glyphicon glyphicon-send" ></i>
<br>
Send
</a>
</div>
The div can be hidden in this way---
$('.zz').css('display', 'none');
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group btn-group-justified zz" id="btn-disable">
<a href="#" class="btn btn-info col-sm-3">
<i class="glyphicon glyphicon-send" ></i><br>
Send
</a>
</div>
</body>
</html>
If you want to hide the div with onclick event you can do it in this way--
$('.zz').click(function(){
$('.zz').css('display', 'none');
});
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group btn-group-justified zz" id="btn-disable">
<a href="#" class="btn btn-info col-sm-3" >
<i class="glyphicon glyphicon-send" ></i><br>
Send
</a>
</div>
</body>
</html>
NOW IN THIS WAY YOU CAN DISABLE IT
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group btn-group-justified zz" id="btn-disable">
<a href="#" class="btn btn-info col-sm-3" >
<i class="glyphicon glyphicon-send" ></i><br>
Send
</a>
<script type="text/javascript">
$('.zz').click(function(){
$(".zz *").attr("disabled", "disabled").off('click');
});
</script>
</div>
</body>
</html>
As you are just beginning with js and xml.
This example can be helpful
Now if you want to disable the button based on some value do it like this--
NOTE
this just a rough way to give you some idea.
In this example you have two value hi and bye which are coming from your xml and getting displayed on the HTML page. So based on that value you are disabling the div.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group btn-group-justified zz2" id="btn-disable2">
<a href="#" class="btn btn-info col-sm-3" >
<i class="glyphicon glyphicon-send" ></i><br>
bye
</a>
</div>
<div class="btn-group btn-group-justified zz1" id="btn-disable1">
<a href="#" class="btn btn-info col-sm-3" >
<i class="glyphicon glyphicon-send" ></i><br>
hi
</a>
</div>
<script type="text/javascript">
var node = document.getElementById('btn-disable2');
textContent = node.textContent;
alert($.trim(textContent));
if ($.trim(textContent) == 'bye') {
$(".zz2 *").attr("disabled", "disabled").off('click');
}
var node1 = document.getElementById('btn-disable1');
textContent1 = node1.textContent;
alert($.trim(textContent1));
if ($.trim(textContent1) == 'bye') {
$(".zz1 *").attr("disabled", "disabled").off('click');
}
</script>
</body>
</html>
Try this :
document.getElementsByClassName("btn")[0].style.pointerEvents = "none";
var timestampArray = document.getElementsByClassName("btn");
for(var i = (timestampArray.length - 1); i >= 0; i--)
{
timestampArray[i].style.pointerEvents = "none";
}
Working fiddle
I am performing action on dropdown menu item selection.
JS fiddle
but does not make any action when I test on localhost, even does not show menu item. Though I have included all files.
code:
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="sticky-footer-navbar.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$(".dropdown-menu li a").click(function(){
alert("hi");
var selText = $(this).text();
$('label').css('color',selText);
});
</script>
</head>
<body>
<label>Test color</label>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn btn-default">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li>yellow
</li>
<li>green
</li>
<li>black
</li>
<li class="divider"></li>
<li>red
</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
</div>
</body>
</html>
What's wrong with this code?
UPDATE1
<script>
$( document ).ready(function() {
alert("hi");
var selText = $(this).text();
$('label').css('color',selText);
});
</script>
No change
the result looks like this:
UPDATED CODE:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src=" http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
<link href="css/bootstrapa.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<label>Test color</label>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn btn-default">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li>yellow
</li>
<li>green
</li>
<li>black
</li>
<li class="divider"></li>
<li>red
</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
</div>
<script>
$( document ).ready(function() {
alert("hi");
var selText = $(this).text();
$('label').css('color',selText);
});
</script>
</body>
</html>
Here's your code:
<!doctype html>
<html lang="en">
<head>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<label>Test color</label>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn btn-default">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li>yellow
</li>
<li>green
</li>
<li>black
</li>
<li class="divider"></li>
<li>red
</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script>
$(".dropdown-menu li a").click(function(){
alert("hi");
var selText = $(this).text();
$('label').css('color',selText);
});
</script>
</body>
</html>
Hope this helps.
Try to include the jQuery lib before your jQuery UI refer.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
try this:
$(".dropdown-menu li a").on('click', function(){
alert("hi");
var selText = $(this).text();
$('label').css('color',selText);
});
You need to define the click function when the document is ready. In your edit, you just try to move the code from the click function the $(document).ready() function. In that context $(this) does not refer to the select element. Try this:
$(document).ready(function() {
$(".dropdown-menu li a").click(function(){
var selText = $(this).text();
$('label').css('color',selText);
});
});