I've been trying for quite a while to get my text to replace and it just hasn't been replacing anything no matter what I try. I've tried searching everywhere but I can't find an answer.
<html>
<head>
<meta charset="UTF-8">
<title>OnStream</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=0">
<link rel="stylesheet" href="https://onstreamvideo.github.io/css/style.css">
</head>
<script language="JavaScript">
function showInput() {
document.getElementById('display').innerHTML =
document.getElementById("sharingurl").value;
}
</script>
<script>
function fetchCorrections() {
var str = document.getElementById("sharingurl").innerHTML;
var res = str.replace(/www.google.com/g, "google");
document.getElementById("sharingurl").innerHTML = str;
}
</script>
<body onload="fetchCorrections();">
<header>
<h1>OnStream</h1>
</header>
</body>
<ul>
<li>
<form>
Dropbox Share Url:<br>
<input type="text" id="sharingurl" value="url"><br><br>
<input type="button" onclick="showInput();" value="Click"><br/>
<br>
</form>
</li>
</ul>
<ul>
<li>
<label>Your Input</label>
<p><span id='display'</span></p>
</li>
<ul>
</body>
</html>
I'm new to Stack Overflow and coding in general so please excuse my ignorance if I made a mistake. :)
EDIT:
Sorry guys, I'm tired and I've been working on this randomly throughout the day trying to pick up where I left off each time and I left a few errors in my code before posting. I tried cleaning up my code a little bit, and I've swapped the code above for the newer more clean code; if you see any mistakes feel free to let me know and just understand it was a clumsy mistake on my part. Thanks.
Try this out, it will work
<html>
<head>
<meta charset="UTF-8">
<title>OnStream</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=0">
<link rel="stylesheet" href="https://onstreamvideo.github.io/css/style.css">
</head>
<script language="JavaScript">
function showInput() {
document.getElementById('display').innerHTML =
document.getElementById("sharingurl").value;
}
function fetchCorrections() {
showInput();
var str = document.getElementById("sharingurl").value;
var res = str.replace(/blue/g, "red");
document.getElementById("sharingurl").value = res;
}
</script>
<body class="depiction">
<header>
<h1>OnStream</h1>
</header>
</body>
<body>
<ul>
<li>
<form>
Dropbox Share Url:
<br>
<input type="text" id="sharingurl" value="url">
<br>
<br>
<input type="button" onclick="fetchCorrections()" value="Click">
<br/>
<br>
</form>
</li>
</ul>
<ul>
<li>
<label>Your Input</label>
<p><span id='display' </p>
</li>
<ul>
</body>
</html>
Mistakes in your programs
Span with id= display is incomplete.
Input element doesn't have property like innerHTML.
You should use value property instead of innerHTML to assign value in input element.
multiple body tags.
And try to replace this function with fetchcorrection
function fetchCorrection(){
var str = document.getElementById("sharingurl").value;
var res = str.replace(/blue/g, "red");
document.getElementById("sharingurl").value = res;
}
Related
I'm trying to make a weather app, and use the API from openweathermap, I copied the baseurl from the web like this but it's not currently working...
const api = {
key:"03173bc8739f7fca249ae8d681b68955"
baseurl:"https://home.openweathermap.org/api_keys"
}
const searchbox=document.querySelector('.search-box');
searchbox.addEventListener('keypress', setQuery)
function setQuery(evt){
if (evt.keyCode==13)
//getResults(searchbox.value)
console.log(searchbox.value)
}
So when I type in the search box, the console doesn't show anything...
This is my html file:
<!DOCTYPE html>
<html>
<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> </title>
<link rel="stylesheet" href="weather.css">
</head>
<body>
<div class="app-wrap">
<header>
<input type="text" autocomplete="off" class="search-box" placeholder="Search for a city...">
</header>
<main>
<section class="location">
<div class="city">HCM City, Viet Nam</div>
<div class="date">Friday 25 June 2021</div>
</section>
<div class="current">
<div class="tempt">15<span>°C</span></div>
<div class="weather">Sunny</div>
<div class="high-low">13°C / 16°C</div>
</div>
</main>
</div>
<script src="weather.js"></script>
</body>
</html>
Is there something wrong with the baseurl or something, can anybody tell me?
wrap the selector with " ";
const searchbox = document.querySelector(".search-box");
also correct your api obj:
const api = {
key: "03173bc8739f7fca249ae8d681b68955",
baseurl: "https://home.openweathermap.org/api_keys"
}
You missed to add single quote in querySelector.
const searchbox=document.querySelector('.search-box'); // Corrected
also you need to update the API object
const api = {
key:"03173bc8739f7fca249ae8d681b68955",
baseurl:"https://home.openweathermap.org/api_keys"
}
Im trying to do one of my first websites in html, javascript and css and im having lots of questions! I have this code:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Mercedes Benz Dealership</title>
</head>
<body>
<div id="result1">
**<h2> Good day Buyer!</h2>**
</div>
<form onsubmit="greet(); return false">
<input type ="text" id="name">
<input type="submit">
</form>
</body>
<script>
function greet()
{
var name = document.querySelector("#name").value;
if (name!=="")
{
document.querySelector("#result1").innerHTML ="Good day, " + name;
}
}
</script>
</html>
I want the format of the text in:
document.querySelector("#result1").innerHTML ="Good day, " + name;
To be the same of :
<h2> Good day Buyer!</h2>
The title is the same one! but when the user inputs the name the only difference should be "Good day,Alan" for example with the same bold, letter size and everything of the h2 title!
How can i achieve that?? I have been trying to do it with no success.
Thanks a lot for the help!! really
Just specify the desired (correct) selector:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Mercedes Benz Dealership</title>
</head>
<body>
<div id="result1">
<h2> Good day Buyer!</h2>
</div>
<form onsubmit="greet(); return false">
<input type="text" id="name">
<input type="submit">
</form>
</body>
<script>
function greet() {
var name = document.querySelector("#name").value;
if (name !== "") {
document.querySelector("#result1 h2").innerHTML = "Good day, " + name + "!";
} // ploblem here ^^
}
</script>
you can try appending like this...for reference
enter link description here
document.querySelector("#result1").innerHTML ="<h2>Good day "+name"+"</h2>";
Write the same format that you want to print, in your innerHTML. Then it will work.
document.querySelector("#result1").innerHTML ="**<h2>Good day, " + name+"!</h2>**";
The problem is that you are selecting the div, not the h2 element. I did so by getting the div's first child. Alternatively, you can insert it manually through the innerHTML, or you can move the ID selector to the h2 element.
Note: I made it automatically greet on input.
function greet() {
var name = document.querySelector("#name").value;
if (name !== "") {
document.querySelector("#result1").children[0].innerHTML = "Good day, " + name + "!";
} else {
document.querySelector("#result1").children[0].innerHTML = "Good day, Buyer!";
}
}
document.getElementsByTagName("INPUT")[0].addEventListener("input", greet)
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Mercedes Benz Dealership</title>
</head>
<body>
<div id="result1">
**<h2> Good day Buyer!</h2>**
</div>
<input type="text" id="name">
</body>
</html>
Move the id from the div in the h2 tag, but there are a lot of differnet ways.
<div>
**<h2 id="result1"> Good day Buyer!</h2>**
</div>
If you try to change the "Inner" of the div all inside this tag will be replaced.
I'm learning Javascript and now I'm making to-do list.I've finished the basic one but I want to add the delete button which delete all the checked lists to my to-do list.
I've tried some ways that I came up with and they all failed and I cannot find the answer by googling.
How can I do this ? If there is someone who know, please teach me . I'd appreciated if you could show me how.
this is my code ↓ the error happened saying cannot read property 'parentElement' of null at Object.deleteAll
deleteAll: function() {
let taskListItem, checkBox, checkBoxParent;
for (i=0; i<this.taskListChildren.length; i++){
taskListItem = this.taskListChildren[i];
checkBox = taskListItem.querySelector('input[type = "checkbox"]:checked');
checkBoxParent = checkBox.parentElement;
checkBoxParent.remove();
}
document.getElementById('deleteChecked').addEventListener('click', () => {
tasker.deleteAll();
});
🙏
// this is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do List</title>
<link rel="stylesheet" href="css/styles.css">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
</head>
<body onLoad = "tasker.construct();">
<div class="tasker" id="tasker">
<div class="error" id="error">Please enter a task</div>
<div class="tasker-header" id="tasker-header">
<input type="text" id="input-task" placeholder ="Enter a task">
<button id="add-task-btn"><i class="fas fa-plus"></i></button>
</div>
<div class="tasker-body">
<ul id="tasks">
</ul>
</div>
<button id="deleteChecked">Delete</button>
</div>
<script src="js/main.js"></script>
</body>
</html>
You can use the jQuery library and solve it as follows.
Step 1) Define in your html button element:
<button id="button" onclick="reset()"> RESET </button>
Step 2) define the 'reset ()' function, like this
function reset()
{
$("input:chceckbox").removeAttr("chcecked");
}
Good luck!!
I have a problem, I'm doing a little game and I made a level, where you just have to change the level number to go to the next level, but when the correct value is sent it's supposed to redirect to the next level but it doesn't work ...
function getVal() {
var nmb = document.getElementById('input').value;
var element = document.getElementById('input');
element.addEventListener('keyup', function(event) {
if(nmb == 3) {
document.location.href = "aw3za.html"; //If the value is correct it redirects to the level 3
}
else {
document.location.href = "2ksdkwa.html"; //If the value isn't correct it stays on the level 2
}
})
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RodrigueSS 2 | Level 2</title>
<link rel="stylesheet" href="assets/style/level_template.css">
<link rel="stylesheet" href="assets/style/level2_style.css">
<script src="https://kit.fontawesome.com/57d547920e.js" crossorigin="anonymous"></script>
<script src="assets/script/level2.js"></script>
<script type="text/javascript" src="assets/script/jquery-3.4.1.js"></script>
</head>
<body>
<header>
<div class="prev-page-container">
<img class="prev-page-arrow" src="assets/img/prev-arrow.svg" alt="Back arrow">
</div>
</header>
<!--This is the interesting part--------->
<div class="level-number-wrapper"></div>
<div class="level-number-container">
<form method="GET" name="form1">
<input onclick="getVal()" id="input" name="numbox1" class="level-number" type="number">
</form>
</div>
</div>
<!--------------------------------------->
<footer>
<div class="media-container">
<ul>
<li><a class="media-link" href="https://www.instagram.com/r_dr_go/"><i class="fab fa-instagram"></i></a></li>
<li><a class="media-link"href="https://twitter.com/Rodrigu40035063"><i class="fab fa-twitter"></i></a></li>
<i class="fas fa-arrow-right"></i>
</ul>
</div>
</footer>
</body>
</html>
To the people that have this problem, Here is the JS, I put a window.onload, it means that it only launch when the page is completely loaded :
window.onload = function() {
document.getElementById('input').addEventListener('keyup', function(event) {
if(document.getElementById('input').value == 3) {
window.location.href = "aw3za.html"
}
})
}
document.location has been deprecated for almost as long as JavaScript has existed. Don't use it So use window.location
function getVal() {
var nmb = document.getElementById('input').value;
var element = document.getElementById('input');
element.addEventListener('keyup', function(event) {
if(nmb == 3) {
window.location = "aw3za.html"; //If the value is correct it redirects to the level 3
}
else {
window.location = "2ksdkwa.html"; //If the value isn't correct it stays on the level 2
}
})
}
I don't understand why you need trigger onClick function on input box. that function only execute when you click on that. So when you clicking that value is empty. then when you try to perform keyup the value will be empty. Actually you can use document.location.href.
Problem is your arrangement. Try this
var element = document.getElementById('input');
element.addEventListener('keyup', function(event) {
var nmb = document.getElementById('input').value;
if(nmb == 3){
console.log('in');
document.location.href = "new.html";
}
})
<div class="level-number-wrapper">
<div class="level-number-container">
<form method="GET" name="form1">
<input id="input" name="numbox1" class="level-number">
</form>
</div>
</div>
Several things here:
First you have an extra div closing in the interesting part of your code here:
<div class="level-number-wrapper"></div>
you should erase it.
Second, you don't need to use the function getVal() to add an event listener, you should add it directly.
Last, if you are staying in the same page if unless you change the value to 3 then you don't need the else part of the if.
This being said, this code works for me, check it out:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RodrigueSS 2 | Level 2</title>
<link rel="stylesheet" href="assets/style/level_template.css">
<link rel="stylesheet" href="assets/style/level2_style.css">
<script src="https://kit.fontawesome.com/57d547920e.js" crossorigin="anonymous"></script>
<script src="assets/script/level2.js"></script>
<script type="text/javascript" src="assets/script/jquery-3.4.1.js"></script>
</head>
<body>
<header>
<div class="prev-page-container">
<img class="prev-page-arrow" src="assets/img/prev-arrow.svg" alt="Back arrow">
</div>
</header>
<!--This is the interesting part--------->
<div class="level-number-wrapper">
<div class="level-number-container">
<form method="GET" name="form1">
<input id="input" name="numbox1" class="level-number" type="number">
</form>
</div>
</div>
<!--------------------------------------->
<footer>
<div class="media-container">
<ul>
<li><a class="media-link" href="https://www.instagram.com/r_dr_go/"><i class="fab fa-instagram"></i></a></li>
<li><a class="media-link"href="https://twitter.com/Rodrigu40035063"><i class="fab fa-twitter"></i></a></li>
<i class="fas fa-arrow-right"></i>
</ul>
</div>
</footer>
<script>
document.getElementById('input').addEventListener('keyup', function(event) {
if(document.getElementById('input').value == 3) {
document.location.href = "aw3za.html"
}
})</script>
</body>
</html>
I think you can use both location and window but window is a bit better for cross browser safety as stated here:
What's the difference between window.location and document.location in JavaScript?
window.open
Calling window.open function in the listener had made the browser open the tab.
Here is the working code:
1. index.html
<!DOCTYPE html>
<html>
<body>
<div class="level-number-wrapper">
<div class="level-number-container">
<form method="GET" name="form1">
<input id="input" name="numbox1" class="level-number" type="number">
</form>
</div>
</div>
<script>
document.getElementById('input').addEventListener('keyup', function(event) {
if(document.getElementById('input').value == 3) {
window.open("aw3za.html")
}
})</script>
</body>
</html>
2. aw3za.html
<!DOCTYPE html>
<html>
<head>
<title> Level 2</title>
</head>
<body>
<h1>AW3ZA</h1>
</body>
</html>
Try to replace
document.location.href
By
window.location
So, as you can see I amusing javascript to show/hide elements, however when you click the .png it shows the text but does not hide the other element's text. I have been going over and over this script and Google searching the hell out of it and I cannot come up with an answer. I think I need another pair of eyes, so if anyone takes a look at this let me know if there are errors or if I'm missing some code.
<html>
<head>
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="NKit.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
function showStuff(id) {
document.getElementById(id).style.display = 'block';
}
function hideStuff(id) {
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<body>
<div class="content">
<section class="left">
<p>
<img src="character1.png" id="char1" />
</p>
<p>
<img src="character2.png" id="char2" />
</p>
</section>
<section class="right">
<span id="character1" style="display: none;">Show character1 information</span>
<span id="character2" style="display: none;">Character 2 information</span>
</section>
</div>
</body>
</html>
<a href="#" onclick="showStuff('character1');" onclick="hideStuff('character2');">
On this line, you first set the property onclick to showStuff('character1'), then you reassign it to hideStuff('character2').
So, you should wrap these two function calls into one function and then assign that function to onclick.
onclick="function() { showStuff('character1'); hideStuff('character2'); }