Here I'm trying to set index to my button id, for example if I have button id like unique , second button should have unique0, and third button should have unique1 like this. actually button in each loop so that i am same id with all buttons anyone pls let me know how to achieve it
note: i need button id's like unique0, unique1, unique2
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<button id="unique" type="button" class="btn btn-primary">Primary</button>
</div>
<script>
$(function() {
var index = $("#unique").index(this);
$("#unique").append(index);
)};
</script>
</body>
</html>
Use a loop to change all the IDs.
$(".btn").each(function(i) {
this.id = 'unique' + i;
this.innerText += i;
});
Related
hello my code isn't working idk why i tried to make textarea char counter that only shows the chachter not maxiumum
here is the java script
let text = document.querySelector('#text');
let number = text.value.length;
let count = document.querySelector('#count');
text.addEventListener("input", updateCount());
function updateCount(){
count.value + number
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karakter sayısı</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="ses">
<textarea id="text" placeholder="Yazıyı buraya Kopyala veya Yaz"></textarea>
</div>
<span id="filhu">Bu kadar yazdın:</span><span id="count">0</span>
<script src="main.js"></script>
</body>
</html>
In your text.addEventListener("input", updateCount()); assignment you did not assign the function updateCount to the input event of the selected element but instead you executed it once and assigned the non-existent return value of the function call to the event.
And in the function itself you will need to put (=assign) the calculated count somewhere too:
let text = document.querySelector('#text');
let count = document.querySelector('#count');
text.addEventListener("input", updateCount);
function updateCount(ev){
count.textContent=ev.target.value.length;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karakter sayısı</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="ses">
<textarea id="text" placeholder="Yazıyı buraya Kopyala veya Yaz"></textarea>
</div>
<span id="filhu">Bu kadar yazdın:</span><span id="count">0</span>
<script src="main.js"></script>
</body>
</html>
ev.target.value.length gets the current length of the <textarea> element and count.textContent= assigns it to the target <span>.
A better way is by subscribing to the keyup event and getting the value from the scope using this keyword
function characterCount() {
document.getElementById('text').onkeyup = function () {
document.getElementById('count').innerHTML = this.value.length;
};
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karakter sayısı</title>
</head>
<body>
<div class="ses">
<textarea id="text" placeholder="Yazıyı buraya Kopyala veya Yaz" onchange="characterCount()"></textarea>
</div>
<span id="filhu">Bu kadar yazdın:</span><span id="count">0</span>
</body>
</html>
i have a "Pause" button with a pause_circle_outline materialize icon, and when it clicked i want to change the text to "Resume" and changing the icon to play_circle_outline, but when i try to change the text it changed the text and deletes the icon. here is my code snippet example:
jQuery(document).ready(function($){
$(document.getElementById("pause_btn")).click(function(){
document.getElementById("pause_btn").innerText = "Resume"
});
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src = "Sources/js/select_require.js"></script>
<script src = "Sources/js/routes.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<body>
<a class="waves-effect waves-light btn" id="pause_btn">Pause<i class="material-icons right">pause_circle_outline</i></a>
</body>
</html>
.innerText is a sort of "safe"* way to access a node's innerHTML, which in your case includes both the Pause-text, as well as the <i.../> tag.
A way to solve this is to add a span to hold the text. spans don't do anything (as they are inline elements and are by default formatted/shown as a simple text element), but they help by making the text node selectable by document.querySelector!
Example:
var playing = true
window.addEventListener("load", () => {
document.querySelector("#pause_btn").addEventListener("click", () => {
playing = !playing
if(playing) {
document.querySelector("#pause_btn span").innerText = "Pause"
document.querySelector("#pause_btn i").innerText = "pause_circle_outline"
} else {
document.querySelector("#pause_btn span").innerText = "Resume"
document.querySelector("#pause_btn i").innerText = "play_circle_outline"
}
});
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<body>
<a class="waves-effect waves-light btn" id="pause_btn">
<span>Pause</span>
<i class="material-icons right">pause_circle_outline</i>
</a>
</body>
</html>
I also added some extra code to make it clickable multiple times!
*: By safe, in this context, I mean that it's safe from a security issue called XSS. Generally it's better to use innerText when you don't explicitly need to change the HTML itself, but if you do: Make sure that there's NO way a user can input something that gets put into the innerHTML. What I initially meant was simply that writing to either innerHTML and innerText will always overwrite whatever contents the element has, and that innerText is generally the safer of the two.
Both textContent and innerText remove child nodes when altered
Docs
Perhaps place your text within a span with an ID and change its textContent?
that way your i tag should remain untouched.
Have you tried putting the icon along with the text to the innerHTML?
jQuery(document).ready(function($){
$(document.getElementById("pause_btn")).click(function(){
document.getElementById("pause_btn").innerHTML = 'Resume<i class="material-icons right">pause_circle_outline</i>'
});
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src = "Sources/js/select_require.js"></script>
<script src = "Sources/js/routes.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<body>
<a class="waves-effect waves-light btn" id="pause_btn">Pause<i class="material-icons right">pause_circle_outline</i></a>
</body>
</html>
Here is my HTML 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">
<link rel="stylesheet" href="style.css">
<title>Tutorial</title>
</head>
<body>
<div class="alert" id="alert">
<p>Alert Alert Alert Alert Alert</p>
<button onclick="close()"><p>×</p></button>
</div>
<script src="script.js" charset="UTF-8"></script>
</body>
</html>
and this is my script.js:
function close() {
document.getElementById("alert").style.display = "none";
}
for some reason i can't use it externally, but when i use it inline it works. i've been searching for the answer for hours, but i can't find it anywhere, please help!
Change the name of the function from 'close' to another name like 'hideAlert'
function hideAlert() {
document.getElementById("alert").style.display = "none";
}
<div class="alert" id="alert">
<p>Alert Alert Alert Alert Alert</p>
<button onclick="hideAlert()"><p>×</p></button>
</div>
Suppose the title attribute was used as the text for a tool tip. Is it possible just to change the text, using jQuery?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
Hover over me
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
I couldn't get it to change with the option as I believe the api says using title is to tell it what the value should be if the title is not there. I got it to work by changing the title to be data-title and gave the title option as a function that returns this value.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({
title: function () {
return this.getAttribute('data-title');
}
});
setInterval(function(){
$('[data-toggle="tooltip"]').attr('data-title', Date.now());
}, 1000);
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h3>Tooltip Example</h3>
Hover over me
</div>
I wanted save value in inputbox to JS variable, but when i save it, doesn't appear in console, why? thanks for advice
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Color Picker</title>
<link href="color-picker.min.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js" ></script>
</head>
<body>
<p><input type="text"></p>
<script src="color-picker.min.js"></script>
<script>
var picker = new CP(document.querySelector('input'));
picker.on("change", function(color) {
this.target.value = '#' + color;
})
function colorpick() {
var el = document.querySelector('input');
console.log(el);
}
</script>
<input onclick="colorpick()" type="button" class="button" value="Submit">
</body>
</html>
I am not sure what are you trying to accomplish but colorpick function is only selector of the input element itself. You need console.log(el.value) instead.