I'm new to the forum and new to html. I've tried may of the answers in the forums but nothing is seaming to work. While like I said i'm new I've tried looking through w3shools and having a hard time figuring this out.
what I want is to when I click the button, I would like is for it to look at the <h1><h1> and are you = x, if you are = to x then please change to work. if you are = to work please change to x.
<!DOCTYPE html>
<html>
<Head>
<title>Heather I Love You!</title>
</head>
<body style= background-color:#A8A8A8>
<!========This is the header===========>
<div id="header" style= "background-color:#00FF33;" >
<h1><p id="hheader">Heather this is a series of Pitures, Videos, and Poems to
show you the love that I have for you!"</p></h1></div>
<!=============The side bar that will allow a list of where she Wants to
go==========>
<div id="Menu" Style="background-
color:#660033;height:300px;width:125px;float:left;">
<Talbe>
<b><h3{color:white}>Categories</h3></b><br>
<button type="button" onclick="ChangeHead()">click here!</button><br>
<!--Functions-->
<Script>
function ChangeHead()
{
var g=document.getElementById("hheader")
x="Heather this is a series of Pitures, Videos, and Poems to show you the
love that I have for you!"
work="Here are some pictures of us and the boys"
if (document.getElementById("hheader").innertext == x)
{
document.getElementById("hheader").innerHTML= =work;
}
else
{
document.getElementById("hheader").innerHTML== x
}
}
</Script>
</body>
</Html>
Assuming that you have an element with the id 'hheader':
<div id='hheader'>Heather this is a series of Pitures, Videos, and Poems to show you the love that I have for you!</div>
The following script should work:
<script>
function ChangeHead() {
var g = document.getElementById("hheader");
var x = "Heather this is a series of Pitures, Videos, and Poems to show you the love that I have for you!";
var work = "Here are some pictures of us and the boys";
if (document.getElementById("hheader").innerText == x) {
document.getElementById("hheader").innerHTML = work;
} else {
document.getElementById("hheader").innerHTML = x;
}
};
ChangeHead();
</script>
So that the script will change the text of the 'hheader' div to the value of the work variable
I've found a few syntax errors in your code and I corrected them accordingly.
Here you can see a working demo:
http://jsfiddle.net/robertp/LvcCe/
1- You have an unterminated string literal at line 34 :
x="Heather this is a series of Pitures, Videos, and Poems to show you the
love that I have for you!"
For your script to work, you have to replace the line breaks in your string with "\n" in between "to " and "show". Also, take out the line breaks.
2- innerText does not work with Firefox, just use innerHTML all the time instead at line 38 :
if (document.getElementById("hheader").innertext == x)
3- = = makes no sense if you want to assign a value. Use only 1 equal sign when you assign a value to a variable.
Use two only when you are making an if statement!
Watch it at :
line 40 :
document.getElementById("hheader").innerHTML= =work;
and at line 44 :
document.getElementById("hheader").innerHTML== x
4- Line 13 has an extra quote at the end that you want to take out :
show you the love that I have for you!"
If you replace all these mistakes, your script works.
Please look at a modified version of your script that works here:
http://lespointscom.com/a/misc/stackoverflow/2014_01_29/new.html
Or just copy paste this html as is:
<!DOCTYPE html>
<html>
<Head>
<title>Heather I Love You!</title>
</head>
<body style= background-color:#A8A8A8>
<!========This is the header===========>
<div id="header" style= "background-color:#00FF33;" >
<h1><p id="hheader">Heather this is a series of Pitures, Videos, and Poems to
show you the love that I have for you!</p></h1></div>
<!=============The side bar that will allow a list of where she Wants to
go==========>
<div id="Menu" Style="background-
color:#660033;height:300px;width:125px;float:left;">
<Talbe>
<b><h3{color:white}>Categories</h3></b><br>
<button type="button" onclick="ChangeHead()">click here!</button><br>
<!--Functions-->
<Script>
function ChangeHead()
{
var g=document.getElementById("hheader")
x="Heather this is a series of Pitures, Videos, and Poems to \n\nshow you the love that I have for you!"
work="Here are some pictures of us and the boys"
if (document.getElementById("hheader").innerHTML == x)
{
document.getElementById("hheader").innerHTML=work;
}
else
{
document.getElementById("hheader").innerHTML= x
}
}
</Script>
</body>
</Html>
Related
I wanting to make an HTML app that sends you to a certain website depending on the number of spaces in a text box. Here is what I am thinking:
If there are no spaces, go to google.com.
Else, go to bing.com.
I found this for getting the word count:
Count = myText.trim().replace(/\s+/g, ' ').split(' ').length;
What should I do from here? I tried making an if statement but got a plethora of errors. All help is appreciated as I am new to HTML. Thank you in advance!
I see that im posting late...
Try the following, I hope this helps you out :)
function submit(){
// Get input contents
var content=document.getElementById("wierd").value;
// Get space count
var count=(content.match(/ /g) || []).length;
// Redirect the user
// In this example, we dont actually redirect the user since this is quite annoying.
if(count===0){// If theres no spaces
console.log("duckduckgo.com");
}else{
if(count===1){// If theres 1 space
console.log("yandex.com");
}else{
if(count===2){// If theres 2 spaces
console.log("yahoo.com");
}else{//If not a choice
console.log("unknown.com");
}
}
}
}
/*ALL SO related*/
body{
background:#121212;
font-family:Helvetica, sans-serif;
}
input,button{
padding:4px;
margin:5px;
background:#333333;
border:1px solid grey;
color:white;
outline:none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<input type="text" id="wierd">
<button onclick="submit();">Fire up useless function</button>
</body>
<script src="script.js"></script>
<html>
here is my solution and I didn't use your way of finding word count :
// select your text box
let text = document.getElementById('someId').value;
// if there is only 1 element in the array then there is no space and redirect to google if not go to bing
if( text.split(' ').length > 1 ){
window.location = 'https://www.google.com';
} else {
window.location = 'https://www.bing.com';
}
I am making an array from the text in the input by splitting it using the space
example :
text = 'aaaa aaaa aa' ====> going to be ['aaaa', 'aaaa', 'aa']
if there is more than 1 element then there is 1 space at least and we proceed to the if statement
A way to do it:
function redirect(str) {
var count = str.trim().replace(/\s+/g, ' ').split(' ').length - 1;
count == 0 ?
window.open('https://www.google.com/') :
window.open('https://www.bing.com/') // :
// you can add more conditions like count == 1 ? {direction} : {else direction}
}
Even though this is completely weird, and probably useless:
function getSite() {
var lookup = {"":"www.google.com", " ": "www.bing.com"};
var result = document.getElementById("weirdo").value;
// window.open(lookup[result]);
// For demo, commented out and logging instead
alert(lookup[result]);
}
<input id="weirdo" type="text"/>
<button type="button" click="getSite()">
Enter text and click me!
</button>
Okay, I'm trying to make a cheesy accent generator to practice with RegEx. But I have a strange problem that seems unrelated to RegEx. The submit button doesn't do anything. At first the function "maccent" was just called "accent" and at that time the console said "accent" was not a function. With nothing better to go on, I assumed it was because the word "accent" was used so many other times, so I changed the function name to "maccent". Now, however, nothing happens. What's the deal? Here is my code:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Accent Generator</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
</head>
<body>
<p>Choose an accent</p>
<input type = "text">
<form action="">
<input type="radio" name="accent" value="German"> German<br>
<input type="radio" name="accent" value="English"> English<br>
<input type="radio" name="accent" value="Indian"> Indian
</form>
<button type="submit" onclick = "maccent()">Submit</button>
<div id = "accented"></div>
<script>
var accent = $('input[name="accent"]:checked').val();
function maccent()
{
if (accent == "German")
{
germAcc();
}
}
function germAcc()
{
var sample = $("input").val()
var desire = sample.replace(/[w]/gi, "v")
//not if it's at the end of a word
var desire2 = desire.replace(/th/, "z")
//replace h too, but not with another z.
//wait, what? It replaces t even if its not followed by h
var desire3 = desire2.replace(/er/, "a")
//this is going to be a hard one
//er is replaced with a but only if its followed by a space or a punctuation
mark.
console.log(desire3);
}
function indAcc()
{
var sample = $("input").val()
var desire = sample.replace(/[r]/gi, "d")
//not if it's at the end of a word
//this words, but not on each indivual word
console.log(desire);
}
function itAcc()
{
}
function britAcc()
{
var sample = $("input").val();
var desire = sample.replace(/[a]/gi, "au")
var desire2 = desire.replace(/er/, "a")
//this is going to be a hard one
console.log(desire2);
//not if it's at the end of a word
}
</script>
</body>
</html>
The problem is the assignment of the "variable" accent. You are doing it at global scope (the top level), so it gets assigned when the page is first loaded.
If you move that assignment into the function maccent() (and move the work "mark" back into the comment it belongs to), your page will work.
Incidentally, the old problem was that you had a function and a variable trying to share the name accent. The variable was "winning".
So, I want to make a program that will be able to get user data(a ton of bug names separated by commas), go through, get data for each one, then display all of that data in a table. I have been through rewriting this like 5 times and still nothing happens. Anyone know what is wrong with this code?
My html code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 align="center">Bugs</h1>
<p>In the area below, type in each of the insects you want information
about, seperate them with a comma.</p>
<textarea id="insects"></textarea>
<br>
<button type="button" id="go">Find out!</button>
<br>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
document.getElementById('go').onclick = function() {
var input = document.getElementById('insects').value;
var splitted = input.split(',');
for (i = 0; i<splitted.length; i++) {
var bug1 = splitted[i];
var part1 = // I need to assign it to bug1 without any whitespace
var finish = part1.toLowerCase();
find1(bug1);
}
}
function find1(bug) {
var xmlDocument = $.parseXML("externalfile:drive-77136639a78ffb21e72c7c4dfe7f7bb73604aeb3/root/Bugs/bugs.xml");
var pain = $(xmlDocument).find("value[type='" + bug + "'] pain").text();
alert(pain); <!-- This is to see if it works -->
}
</script>
</body>
Here is my XML code(btw the XML file is called bugs.xml and yes they are in the same exact folder in My Drive/Bugs:
<?xml version="1.0" encoding="UTF-8"?>
<bugs>
<bug type="blisterbeetle">
<name>Blister Beetle</name>
<pain>55</pain>
<conservation></conservation>
<habitat></habitat>
<rarity></rarity>
<class></class>
<order></order>
<family></family>
<species></species>
<dangerous></dangerous>
<external></external>
</bug>
</bugs>
I'm learning a bit HMTL5 to prepare to the 70-480 exam. I'm trying to do some javascript code. It looks something like this:
function inchestometers(inches) {
if (inches < 0)
return -1;
else {
var meters = inches / 39.37;
return meters;
}
}
var inches = 12;
var meters = inchestometers(inches);
document.write("the value in meters is " + meters);
var hello = document.getElementById("hello");
hello.firstChild.nodeValue = "Hello World";
and I have such html code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Htnl 5 test</title>
<script src="script/test.js"></script>
</head>
<body>
<p id="hello">Hello</p>
</body>
</html>
In my VS 2012 i have used the Asp.net Empty Web application project and added the Js file and also the html file. The problem is that The function runs properly without any exeptions. This function is taken from here: http://msdn.microsoft.com/en-us/library/cte3c772(v=vs.94).aspx
But whem I'm trying to run the code where I'm getting the document element it' crashint with the error like in the subject. What I've investigated is that the hello gets the null value. I've also tried the code thaken from here:
http://msdn.microsoft.com/en-us/library/yfc4b32c(v=vs.94).aspx - the example with the div. I have the same effect.
What is wrong? I know that there were simmilar subjects but I can't seem to find one matching to mine. Thank you kindly for your help.
Regards
Rafal
you are getting a problem because your javascript code is running before the element
<p id="hello">
is defined.
the simplest solution is to include your script at the end of the body section instead of in the head section but this would cause the document.write call to occur after the rest of the content.
another solution would be to place the code inside two functions like this
function do_conversion() {
var inches = 12;
var meters = inchestometers(inches);
document.write("the value in meters is " + meters);
}
function say_hello() {
var hello = document.getElementById("hello");
hello.firstChild.nodeValue = "Hello World";
}
then change the body section like this
<body onload='say_hello()'>
<script>
do_conversion();
</script>
<p id="hello">Hello</p>
</body>
I see in almost news websites bar called quick news and its appear and reading character by character like this site http://www.filgoal.com/English/DefaultDynamic.aspx in the latest news section under menus.
i hope if any one can help me to know how it works or give me a sample for that.
thanks,
There is a good jQuery plugin that does exactly this. You can read the documentation and download it from
http://plugins.jquery.com/project/BBCnewsTicker
There is an example of it in action on this page
http://www.makemineatriple.com/jquery?newsTicker=
The BBC style news ticker plugin for jQuery will do what you want.
Well, something like this would do if you don't want to use any plugins:
<html>
<head>
<script>
function printTextDelayed(item, text, symbolNum) {
if (symbolNum == undefined) symbolNum = 0;
if (symbolNum < text.length-1) {
item.innerHTML = text.substring(0,symbolNum+1)+"_";
setTimeout(function() {
printTextDelayed(item, text, symbolNum+1);
}, 100+Math.random()*300);
} else {
item.innerHTML = text;
}
}
function printButtonClick() {
printTextDelayed(document.getElementById("dynalink"), document.getElementById("dynatext").value);
}
</script>
</head>
<body>
<input type="text" id="dynatext">
<input type="button" value="Print" onclick="printButtonClick();"/>
<br/>
</body>
</html>