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){}
Related
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
I have created a button in HTML and want it to show and then hide a text block. Is it possible to do it using only one bottom with JavaScript? I mean that by clicking on the button a text block should appear in <p id="text"></p> and when you click again the text block becomes hidden. In my code, the text block only is shown but it cannot be hidden.
my code:
<button type="button" onclick="rulesEnglish()">Rules</button>
<p id="text"></p>
//js:
function rulesEnglish() {
document.getElementById('text').innerHTML = 'text block';
}
If i understood your question you can try this one:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> test</title>
<script type="text/javascript">
function rulesEnglish(){
var pa = document.getElementById("text");
if (pa.style.display === "none") {
pa.style.display = "block";
pa.innerHTML = 'text block';//if you want write a text...
} else {
pa.style.display = "none";
}
}
</script>
</head>
<body>
<button type="button" onclick="rulesEnglish()">Rules</button>
<p id="text">My Text</p>
</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.
Hello, I am new to HTML and JS therefore would like to ask for some help.
Here I want to display two different HTML elements according if statement is true or false. However, it does not work.
Could I get some help? (:
<!DOCTYPE html>
<html>
<body>
<script>
if (!user) {
<h1> there is no user </h1>
} </script>
if (user) {
<button type="button">Click Me!</button>
} </script>
</body>
</html>
Here is a native Javascript alternative
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="content"></div>
<script>
var el = document.getElementById('content');
var content;
if (!user) {
content = '<h1>there is no user</h1>';
}
if (user) {
content = '<button type="button">Click Me!</button>';
}
el.insertAdjacentHTML('afterbegin', content);
</script>
</body>
</html>
This won't work as is unless the user variable is defined, though, but I'm assuming you already have it available at runtime.
If you have more html in this div you can use a different insert position, see the documentation about it here: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
Using jQuery you would do something like this
html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>
JS
if(!user){
$('body').append('<h1>There is no user</h1>')
} else if(user) {
$('body').append('<button>Login</button>')
}
See js fiddle here.
Also, note that if you want to use jquery include the script in the head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Unfortunately you can't add HTML directly in a block of javascript. What you can do instead though is use jQuery to append a block of HTML.
To do this, you would load jQuery by adding this line to your head tag
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
And then replace your inline javascript with the following:
<script>
if (!user) {
$(document.body).append( "<h1> there is no user </h1>" );
}
if (user) {
$(document.body).append( "<button type='button'>Click Me!</button>" );
} </script>
This code runs immediately once the page is loaded. The onclick event is completely ignored by javascript. What is an easy fix for this because like youtube when you play a video the document.title is updated with a speaker. I want to learn to do that with external javascript because I can do it with internal javascript in the html.
<!DOCTYPE html>
<html>
<head>
<title> Animation </title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="animationcss.css">
</head>
<body>
<script src="animation.js"></script>
<input id="changeButton" type="button" value="Change" ></input>
/External Javascript/
var element = document.getElementById("changeButton");
element.onclick = textChange("changetothis");
function textChange(text){
document.title = text;
}
try calling the function after the document is loaded by placing the script tag below the object or making $(document).ready() function,
this code works fine with me
<!DOCTYPE html>
<html>
<head>
<title> Animation </title>
<meta charset="UTF-8">
</head>
<body>
<input id="changeButton" type="button" value="Change" ></input>
<script src="script.js"></script>
<body>
</html>
and the script is
var el = document.getElementById("changeButton");
el.onclick = function(){
textChange("changetothis");
}
function textChange(text){
document.title = text;
}
You can achieve your desired effect by using an anonymous function, like so:
document.getElementById("changeButton").onclick = function () {
document.title = newTitle;
}
The variable 'newTitle' should be declared & initalized above this code somewhere in order for it to work.