I'm trying to remove the text in the div element when clicked if the text is "Text".
HTML
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8"/>
<body>
<div class="txtField" onclick="emptyField()">
<p>Text</p>
</div>
<script src="script.js"></script>
</body>
</html>
JavaScript
function emptyField() {
var textVar = document.getElementById("txtField");
if (textVar.textContent === "Text")
{
textVar.textContent = "";
}
}
Thank you.
It's easier just to pass a reference to the element, and when you're comparing strings against element text, make sure to trim() it first.
function emptyField(el) {
if (el.textContent.trim() === "Text") el.textContent = "";
}
<div class="txtField" onclick="emptyField(this)" contenteditable="true">
<p>Text</p>
</div>
First of all you have lots of syntax errors my friend :) As listed below:
var textV = document.getElementById("txtField"); // issue here
You have named textV while you are using textVar. Also you are using document.getElementById("txtField") while you have no id attribute in your div, you have class instead in your HTML.
<div class="txtField" onclick="emptyField()" contenteditable="true">
So, fix these errors first.
function emptyField() {
var textV = document.getElementById("txtField"); // Issue here
if (textVar.textContent === "Text") // using textVar
{
textVar.textContent = "";
}
}
THEN USE THIS CODE AND THIS WILL WORK AS EXPECTED:
const div = document.querySelector(".txtField");
div.addEventListener("click",emptyField);
function emptyField() {
var textV = document.querySelector(".txtField p");
if (textV.innerText === "Text")
{
textV.innerText = "";
}
}
<html lang="en">
<meta charset="utf-8"/>
<body>
<div class="txtField" contenteditable="true">
<p>Text</p>
</div>
<script src="script.js"></script>
</body>
</html>
And no it is not because you have your div as contenteditable
Related
My code isn't working as I intend it to, and I don't know how to fix it. So, whenever the person types 'hello' in the box, and then presses Submit, the paragraph hat says hi is supposed to display 'good job', but it's not.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<textarea id="thesearchh" style="resize: none;"></textarea>
<button onclick="submitSearch()">Submit</button>
<p id="searchResult">hi</p>
<script>
function submitSearch() {
if(document.getElementById('thesearchh').includes('hello') == true) {
document.getElementById('searchResult').innerHTML = 'good job';
}
}
</script>
</body>
</html>
you should check input value with document.getElementById(inputId).value not with includes method. includes method works in arrays and strings but not on DOM elements.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<textarea id="thesearchh" style="resize: none;"></textarea>
<button onclick="submitSearch()">Submit</button>
<p id="searchResult">hi</p>
<script>
function submitSearch() {
if(document.getElementById('thesearchh').value === "hello") {
document.getElementById('searchResult').innerHTML = 'good job';
}
}
</script>
</body>
</html>
Stop using inline attributes like: CSS style and JS on* handlers. CSS and JS should be in their respective tags or files.
Use Element.addEventListener() instead of the onclick attribute handler
Use InputElement.value to get an :input's (<textarea> in your case) value.
Use === to compare it with the desired "hello" string
PS: are you sure you need a <textarea> instead of <input type="text">?
Additionally you might want to use String.prototype.trim() to remove whitespaces from your user-input string before comparing. That's up to you.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
#search {
resize: none;
}
</style>
</head>
<body>
<textarea id="thesearchh"></textarea>
<button type="button" id="thesubmitt">Submit</button>
<p id="searchResult">hi</p>
<script>
// DOM Utility functions:
const el = (sel, par) => (par??document).querySelector(sel);
// Task: Match value "hello":
const elSearch = el("#thesearchh");
const elSubmit = el("#thesubmitt");
const elResult = el("#searchResult");
const submitSearch = () => {
const userInput = elSearch.value;
if (userInput === "hello") {
elResult.textContent = 'good job';
}
};
elSubmit.addEventListener("click", submitSearch);
</script>
</body>
</html>
Just added .value in your code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<textarea id="thesearchh" style="resize: none;"></textarea>
<button onclick="submitSearch()">Submit</button>
<p id="searchResult">hi</p>
<script>
function submitSearch() {
if(document.getElementById('thesearchh').value.includes('hello') == true) {
document.getElementById('searchResult').innerHTML = 'good job';
}
}
</script>
</body>
</html>
here you can see the line iam added .value
if(document.getElementById('thesearchh').value.includes('hello') == true){}
So I'm trying to create my own To Do list just to learn javascript and I'm stuck.
I've managed to add a new div with the input that the user writes, but there's no design.
<div class="isDo"> // HTML code
<p id="newTask">Task 1</p>
<hr>
</div>
function addTask() { // JavaScript Code
var div = document.createElement("div");
var taskAdd = document.getElementById("taskAdd").value;
div.innerHTML = taskAdd;
document.getElementsByClassName("isDo")[0].appendChild(div);
}
When I used append paragraph instead of div it the design works, but I want to ad an <hr> tag for each input value.
What way can I add an entire div with paragraph and hr tag?
This should do the trick :)
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="isDo">
<p id="newTask">Task 1</p>
<hr>
</div>
<button id="btn" >add a tag</button>
<script>
function addTask() { // JavaScript Code
var div = document.createElement("div");
var taskAdd = document.getElementById("newTask").innerHTML;
//change the id of the el because taskAdd doesn't point to an element
div.innerHTML = `<p>${taskAdd}</p><hr>`;
//this is the part where you add the text in taskAdd and the hr tag
document.getElementsByClassName("isDo")[0].appendChild(div);
}
var btn = document.getElementById("btn")
.addEventListener("click", addTask);
</script>
</body>
</html>
`
Try this below :
<!DOCTYPE html>
<html>
<title>Test Code</title>
<head>
<script>
function addTask() {
var div = document.createElement("div");
var taskAdd = document.getElementById("taskAdd").value;
div.innerHTML = taskAdd + "<hr>";
document.getElementsByClassName("isDo")[0].appendChild(div);
}
</script>
</head>
<body>
<input id="taskAdd">
<button onclick="addTask()">Add</button>
<div class="isDo">
<p id="newTask">Task 1</p>
<hr>
</div>
</body>
</html>
I'm totally lost as to where to begin here, how would I create a countdown button so that each time my button is clicked, it prints out the global variable and reduce it by 1 in the innerHTML and when it hits 0 it says BOOM?
I know I have to declare the variable outside but not sure what to do afterwards
JS:
var i = 20
function myFunction()
{
i = i--; // the value of i starting at 20
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- link to external JS file. Note that <script> has an
end </script> tag -->
<meta charset="utf-8">
<title> Task 6 </title>
<link href="style.css" type="text/css" rel="stylesheet">
<script src="task6.js" type="text/javascript"></script>
</head>
<body>
<!-- Create a paragraph with id mydata -->
<div id="box">
<p id="mydata"> Count Down </p>
<p> <button onclick="myFunction();"> Click </button></p>
</div>
</body>
</html>
I tryed this code and works fine
var i = 20;
function myFunction() {
myData = document.getElementById("mydata");
i = i - 1;
myData.textContent = i;
if(i <= 0) {//with <=0 the user if click again,after zero he sees only BOOM
myData.textContent = "BOOM!"
}
}
html code
<!DOCTYPE html>
<html lang="en">
<head>
<!-- link to external JS file. Note that <script> has an
end </script> tag -->
<meta charset="utf-8">
<title> Task 6 </title>
<link href="style.css" type="text/css" rel="stylesheet">
<script src="task6.js" type="text/javascript"></script>
</head>
<body>
<!-- Create a paragraph with id mydata -->
<div id="box">
<p id="mydata"> Count Down </p>
<p> <button onclick="myFunction();"> Click </button></p>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- link to external JS file. Note that <script> has an
end </script> tag -->
<meta charset="utf-8">
<title> Task 6 </title>
<link href="style.css" type="text/css" rel="stylesheet">
<script type="text/javascript">
var i = 20;
function myFunction() {
var myData = document.getElementById("mydata");
i = i - 1;
myData.textContent = i;
if(i <= 0) {
myData.textContent = "BOOM!"
}
}
</script>
</head>
<body>
<!-- Create a paragraph with id mydata -->
<div id="box">
<p id="mydata"> Count Down </p>
<p> <button onclick="myFunction();"> Click </button></p>
</div>
</body>
</html>
It's good practice to not inline JS in the HTML so I'll provide an extra example to show how to separate it out using a couple of DOM selection methods:
let count = 20;
// grab the element with the mydata id
const mydata = document.getElementById('mydata');
// grab the button and attach an click event listener to it -
// when the button is clicked the `handleClick` function is called
const button = document.querySelector('button');
button.addEventListener('click', handleClick, false);
function handleClick() {
if (count === 0) {
mydata.textContent = 'Boom';
} else {
mydata.textContent = count;
}
count--;
}
<body>
<p id="mydata">Countdown</p>
<button>Click</button>
<script src="task6.js" type="text/javascript"></script>
</body>
Reference
getElementById
querySelector
addEventListener
I'll assume you want to show the variable output and the BOOM at the <p id="mydata"> Count Down </p>, if I am mistaken correct me. So, something like this:
let i = 20;
const myData = document.querySelector("#mydata");
function myFunction() {
i = i - 1;
myData.textContent = i;
if(i === 0) {
myData.textContent = "BOOM!"
}
}
You almost got it whole,only missed the textContent and if part. If this is what you wanted to achieve. If this isn't what you were looking for, hit me up so I can correct it. Cheers :)
You need some way of displaying the number inside of your variable. One of the simplist ways to do this would be to set text to your paragraph tag using getElementById() and inner HTML. For example, after running your deincrement, on the next line you would do something like...
function myFunction()
{
i = i--; // the value of i starting at 20
document.getElementById("mydata").innerHTML = i;
}
This code simply grabs your "mydata" paragraph from the DOM and injects the number into the tag as html.
I am trying to capitalize everything i type inside the text-input the caps function on js works fine which i can see on console but the innerhtml function is not changing the html file
function clr() {
document.getElementById("box").value = '';
}
function caps() {
var str = document.getElementById("box").value;
console.log(str);
var res = str.toUpperCase();
console.log(res);
document.getElementById("box").innerHTML = res;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>UI</title>
<link rel="stylesheet" href="css.css">
<script src="myscript.js"></script>
<body>
<div id="magic">
<input id="box">
<p id="pp">
<button onclick="clr()">Clear It</button>
<button onclick="caps()">Capitalize</button>
</p>
</div>
</body>
</html>
here i can see caps function is working fine on console but not working in HTML file
input elements don't have an .innerHTML property. They have a .value property.
Only elements that have an opening and closing tag can contain any HTML within them, so only elements like: <div>, <span>, <p>, etc. can utilize .innerHTML.
You accessed the value properly in your clr function.
function clr() {
document.getElementById("box").value = '';
}
function caps() {
var str = document.getElementById("box").value;
console.log(str);
var res = str.toUpperCase();
console.log(res);
document.getElementById("box").value = res;
}
<div id="magic">
<input id="box">
<p id="pp">
<button onclick="clr()">Clear It</button>
<button onclick="caps()">Capitalize</button>
</p>
</div>
For <input type="text">there is no innerHTML, they have the value attribute for that (you actually used it in the caps function).
This should work:
function clr() {
document.getElementById("box").value = '';
}
function caps() {
var str = document.getElementById("box").value;
console.log(str);
var res = str.toUpperCase();
console.log(res);
document.getElementById("box").value = res;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>UI</title>
<link rel="stylesheet" href="css.css">
<script src="myscript.js"></script>
<body>
<div id="magic">
<input id="box">
<p id="pp">
<button onclick="clr()">Clear It</button>
<button onclick="caps()">Capitalize</button>
</p>
</div>
</body>
</html>
I know this question is so familiar in stackoverflow, but still I can't find my solution. I want to get my child div's value when I click the parent div, but my current code gives me "undefined". My html is given below:
<div class="main">
<div class="testId">
1
</div>
<div class="testName">
test
</div>
<div class="testDob">
10/10/10
</div>
</div>
and my script is given below
var id = $(this).child(".testId").innerHTML;
any thoughts?
Try using find():
var id = $(this).find(".testId").text();
"find" finds the elements just inside the div.main
var id = $(this).find(".testId").html();
console.log(id);
Use .children() no selector .child()
var id = $(this).children(".testId")[0].innerHTML;
or
var id = $(this).children(".testId").text();
or
var id = $(this).children(".testId").eq(0).text();
I think this one should works
$('.main').click(function(){
var value = $(this).child(".testId").text();
})
here is a working exmaple
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<div class="main">
<div class="testId">
1
</div>
<div class="testName">
test
</div>
<div class="testDob">
10/10/10
</div>
</div>
<script>
$(".main").click(function () {
var id = $(this).children(".testId").html();
alert(id)
})
</script>
</body>
</html>