Changing h1 element based on input element content Vanilla JS

Changing h1 element based on input element content Vanilla JS - javascript

Why the h1 tag does not change?
Is there anything wrong?
I tried it with alert and it worked perfectly. I mean whenever I typed into input box the alert message showed me the characters. but how about h1 tag?
what did I do wrong?
Here is my snippet:
html {
box-sizing: border-box;
font-size: 2rem;
font-family: 'Georama', sans-serif;
}
body {
background-color: #555;
color: #fff;
display: flex;
justify-content: center;
flex-direction: column;
height: 100vh;
align-items: center;
}
button {
cursor: pointer;
}
.container {
width: auto;
height: 100px;
}
.te {
display: block;
color: white;
}
const text = document.getElementById('pps');
pass.addEventListener('input', (e) => {
const val = e.target.value;
text.innerHTML(val);
});
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js" defer></script>
</head>
<body>
<form class="container">
<label>Type here:</label>
<input
type="text"
placeholder="insert here.,.."
/>
</form>
<h1 class="te" id="pps">PP</h1>
</body>
</html>
</html>

I see two mistakes here:
As it was mentioned in comments innerHTML is property, not a method, so should be called text.innerHTML = e.target.value;
You didn't assign anything to the 'pass' variable.
Also, there's no sense to create the variable if you are going to use the value only once, so we can remove const val = e.target.value; and just use e.target.value directly.
I've attached the working snippet below.
const text = document.getElementById('pps')
document.getElementById('textInput').addEventListener('input', (e) => {
text.innerHTML = e.target.value;
});
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js" defer></script>
</head>
<body>
<form class="container">
<label>Type here:</label>
<input type="text" id="textInput" placeholder="insert here..." />
</form>
<h1 class="te" id="pps">PP</h1>
</body>
</html>
</html>

Related

How to make a live search using ajax, json, html, and github url

I want to make a live search using ajax, json, html and github url. I've searched on google but mostly use the local json file not using the url for the json. And I want to make it in html file format, but in google mostly use php file format. How do I make it?
I've tried to make it but after typing the data does not come out
$(document).ready(function () {
$.ajaxSetup({ cache: false });
$("#title").keyup(function () {
$("#resultlist").html("");
$("#state").val("");
var searchField = $("#").val();
var expression = new RegExp(searchField, "i");
$.getJSON(
"https://raw.githubusercontent.com/bimobaskoro/test/main/data.json",
function (data) {
$.each(data, function (key, value) {
if (value.title.search(expression) != -1) {
$("#resultlist").append(
`
<li class="list-group-item link-class">
<span class="nama">` +
title +
`</span>
</li>
`
);
}
});
}
);
});
$("#resultlist").on("click", "li", function () {
let title = $(this).children(".title").text();
$("#title").val(title);
$("#resultlist").html("");
});
});
#result {
position: absolute;
width: 100%;
max-width: 870px;
cursor: pointer;
overflow-y: auto;
max-height: 400px;
box-sizing: border-box;
z-index: 1001;
}
.link-class:hover {
background-color: #f1f1f1;
}
<!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" />
<meta name="Description" content="Enter your description here" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
<link rel="stylesheet" href="assets/css/style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<title>Title</title>
</head>
<body>
<input
class="input-search col-lg-6 mt-3"
type="text"
placeholder=" Search"
name="search"
id="search"
class="form-control"
/>
<ul class="list-group" id="result"></ul>
</body>
</html>

Unique CSS styles for "+" and "-" when user types in input

When the user types in + in my input, I would like the + to be green
Ex: +10000 --> "+" should be green and 10000 should be black
When the user types in - in my input, I would like the - to be red
Ex: -10000 --> "-" should be red and 10000 should be black
My idea was to use ::first-letter, but I realize it doesn't work on input
Is this possible at all with css and javascript? Do I need some fancy Regex to accomplish this?
input {
font-size: 100px;
}
/* only - should be red */
input::first-letter {
color: red;
}
/* only + should be green */
input::first-letter {
color: green;
}
<!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" />
<link rel="stylesheet" href="styles.css" />
<title>Static Template</title>
</head>
<body>
<input type="text" />
</body>
</html>

First get the <input> element with .getElementsByTagName('input')[0], then you can attach an event listener on keyup. From here, you can use .style.color to update the color based on .value[0]:
const target = document.getElementsByTagName('input')[0];
target.addEventListener('keyup', function() {
if (this.value[0] === '-') {
this.style.color = 'red';
}
else if (this.value[0] === '+') {
this.style.color = 'green';
}
else {
this.style.color = 'black';
}
})
input {
font-size: 100px;
}
<!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" />
<link rel="stylesheet" href="styles.css" />
<title>Static Template</title>
</head>
<body>
<input type="text" />
</body>
</html>
Note that the above snippet only checks the first character inputted. If you want to check for any occurrence of the target character, you can loop over the .value.

Using replace function in javascript

So I have the following in my page which is a textarea with some text in it:
and what i want to do now is to replace the BR in the text with newline \r such that i would get the following displayed in the textarea:
Hi
I
Am
Jake
Here's what I tried so far:
console.log(document.getElementById("sample").value);
document.getElementById("sample").value = document.getElementById("sample").value.replace("<BR>","\n");
html, body {
height: 100%;
}
textarea {
resize: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div id = "outer">
<textarea id="sample">Hi<BR>I<BR>Am<BR>Jake</textarea>
</div>
<script src="test.js"></script>
</body>
</html>
However, it doesn't seem to be displaying properly. Would appreciate some help on this.

Use replaceAll() instead of replace(). The replace function will replace only the first match, replaceAll() will replace all the occurrences in the given string.
I also suggest escaped strings in the replace parameters. Add backslash (\) in your < > characters.
console.log(document.getElementById("sample").value);
document.getElementById("sample").value = document.getElementById("sample").value.replaceAll("\<BR\>","\n");
html, body {
height: 100%;
}
textarea {
resize: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div id = "outer">
<textarea id="sample">Hi<BR>I<BR>Am<BR>Jake</textarea>
</div>
<script src="test.js"></script>
</body>
</html>

JavaScript's replace function only replaces the first instance. You can, however, use regex with the /g flag. I replaced "<BR>" with /<BR>/g, and it works (you just have to scroll). If you're interested, there is also String.prototype.replaceAll, but that doesn't have that good browser support.
console.log(document.getElementById("sample").value);
document.getElementById("sample").value = document.getElementById("sample").value.replace(/<BR>/g,"\n");
html, body {
height: 100%;
}
textarea {
resize: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div id = "outer">
<textarea id="sample">Hi<BR>I<BR>Am<BR>Jake</textarea>
</div>
<script src="test.js"></script>
</body>
</html>

Use .value.split("<BR>").join("\n") instead of .value.replace("<BR>", "\n")
document.getElementById("sample").value = document.getElementById("sample").value.split("<BR>").join("\n");
html, body {
height: 100%;
}
textarea {
resize: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div id = "outer">
<textarea id="sample">Hi<BR>I<BR>Am<BR>Jake</textarea>
</div>
<script src="test.js"></script>
</body>
</html>

Here is my solution:
document.getElementById("sample").value = document.getElementById("sample").value.replace(/\<BR\>/g,"\n").trim();

How to change current time on a web page?

I need to change current time on my web page. How to change it?
I am displaying current time using below code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Digital Clock created with JavaScript" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Current System Time</title>
<!-- <link rel="stylesheet" href="css/style.css"> -->
</head>
<body>
<div id="not-clock"><span>Current System Time:</span></div>
<div id="clock"></div>
<div id="day"></div>
<div id="date"></div>
<script src="scriptTime.js"></script>
</body>
</html>

Please set the current time on the web page as per this example.
HTML
<div class='time-frame'>
<div id='date-part'></div>
<div id='time-part'></div>
</div>
<br>
<input type='button' id='stop-interval' value='Stop time' />
**JS**
$(document).ready(function() {
var interval = setInterval(function() {
var momentNow = moment();
$('#date-part').html(momentNow.format('YYYY MMMM DD') + ' '
+ momentNow.format('dddd')
.substring(0,3).toUpperCase());
$('#time-part').html(momentNow.format('A hh:mm:ss'));
}, 100);
$('#stop-interval').on('click', function() {
clearInterval(interval);
});
});
**CSS**
.time-frame {
background-color: #000000;
color: #ffffff;
width: 300px;
font-family: Arial;
}
.time-frame > div {
width: 100%;
text-align: center;
}
#date-part {
font-size: 1.2em;
}
#time-part {
font-size: 2em;
}

jQuery - Disable href based on checkbox - Location of script?

Not sure what I am doing wrong, but I am very much a novice with javascript and html so probably a lot. I am trying to enable / disable an href link based on the selection of the check box. Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<meta http-equiv="keywords" content="keyword1, keyword2" />
<meta http-equiv="description" content="Description of Page" />
<link href="css/style.css"rel="stylesheet" type="text/css" />
<style type="text/css">
.auto-style1 {
font-size: 12px;
color: #4d4d4d;
line-height: 2em;
margin: 5px;
padding: 0;
text-align: center;
}
.auto-style2 {
text-align: center;
}
.auto-style3 {
font-family: Neogrey;
}
</style>
<script type="jQuery">
$('#link').click(function(){return false; });
$('#check').click(function() {
if(!$(this).is(':checked')){
$('#link').bind('click', function(){ return false; });
}else{
$('#link').unbind('click');
}
});</script>
</head>
<body>
<div class="auto-style2">
<form id="form1" runat="server">
<div class="logo"><h1 class="auto-style3">
</h1></div>
<h2 class="head">Header Text</h2>
<div class="auto-style1">
Welcome Text.<br />
<input type="checkbox" id="check"/><label for="check">I accept the Terms of Service.</label>
<br />
<a href="http://www.google.com" id="link">
<img alt="" height="30" src="images/download.png" width="100" /></a><br />
</div>
<div class="footer">
<div class="menu">
iOS
Android
Blackberry
Support
</div>
</div>
</form>
</div>
</body>
</html>
Any help is greatly appreciated!

Once you've included jQuery, I'd suggest making use of the DOM to make the script a little more efficient:
// bind the click-handler:
$('#link').click(function(e){
// prevent the default action of clicking on a link:
e.preventDefault();
// if the element with id 'check' is checked:
if (document.getElementById('check').checked){
// change the window.location to the 'href' of the clicked-link:
window.location = this.href;
}
});
JS Fiddle demo.
This would lead to the following HTML of your <head> element:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<meta http-equiv="keywords" content="keyword1, keyword2" />
<meta http-equiv="description" content="Description of Page" />
<link href="css/style.css"rel="stylesheet" type="text/css" />
<style type="text/css">
/* CSS removed for brevity */
</style>
<!-- note that this must come before the script containing the jQuery code
which in this case follows immediately -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="jQuery">
$('#link').click(function(e){
e.preventDefault();
if (document.getElementById('check').checked){
window.location = this.href;
}
});
</script>
</head>
Alternatively (though you still need to include jQuery), you could use the following approach:
// binds a change-handler function to the check-box:
$('#check').change(function () {
/* adds the 'disabled' class to the '#link' element if
the '#check' element is _not_ checked, and removes the
class if the '#check' element _is_ checked: */
$('#link').toggleClass('disabled', !this.checked);
/* triggers the change event-handler (so the class-name is toggled
appropriately on page-load: */
}).change();
/* attaches a delegated click-handler to the 'body' element,
if the click occurs on an 'a' element with the 'disabled'
class the function is executed:
*/
$('body').on('click', 'a.disabled', function(e){
// the default behaviour is prevented
e.preventDefault();
});
JS Fiddle demo.
References:
change().
click().
document.getElementById().
event.preventDefault().
on().
toggleClass().
window.location.

Put the following line in between your and tags to be able to use jquery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
Change your line that says:
<script type="jQuery">
To:
<script type="text/javascript">

jsFiddle example
As Tom Gerken was the first to point out, you must include the jQuery library as he demonstrated in his answer. This is really the key point in solving your problem and Tom should receive credit for the correct solution.
However, here is another approach for enabling/disabling the link:
Begin with your href set to "#", as in:
<a href="#" id="link">
Your jQuery code block would do this:
$('#check').click(function() {
if( $(this).is(':checked') ){
$('#link').attr('href','http://www.google.com');
}else{
$('#link').attr('href','#');
}
});
Full Code Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<meta http-equiv="keywords" content="keyword1, keyword2" />
<meta http-equiv="description" content="Description of Page" />
<link href="css/style.css"rel="stylesheet" type="text/css" />
<style type="text/css">
.auto-style1 {
font-size: 12px;
color: #4d4d4d;
line-height: 2em;
margin: 5px;
padding: 0;
text-align: center;
}
.auto-style2 {
text-align: center;
}
.auto-style3 {
font-family: Neogrey;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<style>
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#link').click(function(){return false; });
$('#check').click(function() {
if( $(this).is(':checked') ){
$('#link').attr('href','http://www.google.com');
}else{
$('#link').attr('href','#');
}
});
}); //END $(document).ready()
</script>
</head>
<body>
<div class="auto-style2">
<form id="form1" runat="server">
<div class="logo"><h1 class="auto-style3">
</h1></div>
<h2 class="head">Header Text</h2>
<div class="auto-style1">
Welcome Text.<br />
<input type="checkbox" id="check"/><label for="check">I accept the Terms of Service.</label>
<br />
<a href="#" id="link">
<img alt="" height="30" src="images/download.png" width="100" /></a><br />
</div>
<div class="footer">
<div class="menu">
iOS
Android
Blackberry
Support
</div>
</div>
</form>
</div>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

Changing h1 element based on input element content Vanilla JS - javascript

Related

How to make a live search using ajax, json, html, and github url

Unique CSS styles for "+" and "-" when user types in input

Using replace function in javascript

How to change current time on a web page?

jQuery - Disable href based on checkbox - Location of script?

Categories

Resources