Jump to content
Please Use CODE Tags

Some JS help wanted

AlTech
By AlTech
in Programming
 Share
Go to solution Solved by vorticalbox,

You actually need to break after every switch case.

 

https://jsfiddle.net/zmzx3hkc/2/

  

var splashscreen = document.getElementById ("editor");
var num = Math.floor((Math.random() * 20) + 1);

switch(num){
case 1:
    splashscreen.placeholder = "Type anywhere to start!"
		break;
case 2:
    splashscreen.placeholder = "Made using Web Technologies!";
	break;
case 3:
    splashscreen.placeholder = "Toggle Developer Tools is your friend!";
		break;
case 4:
    splashscreen.placeholder = "Today i'm gonna be productive!";
		break;
case 5:
  splashscreen.placeholder = "Only the most awesome type of Program ever";
		break;
case 6:
    splashscreen.placeholder = "Program X";
		break;
case 7:
  splashscreen.placeholder= "Ready to do work?";
	break;
case 8:
  splashscreen.placeholder = "All set!";
	break;
case 9:
    splashscreen.placeholder = "What a day!";
		break;
case 10:
    splashscreen.placeholder = "Another day at the office?";
		break;
case 11:
  splashscreen.placeholder = "Some generic place holder goes here lol.";
		break;
case 12:
  splashscreen.placeholder = "100% Suitable for Work";
	break;
case 13:
    splashscreen.placeholder = "What can't be done on such a great day?";
		break;
case 14:
    splashscreen.placeholder = "I'm so jealous that you use such amazing tools!";
		break;
case 15:
    splashscreen.placeholder = "Time to do great things!";
		break;
case 16:
  splashscreen.placeholder = "Made by Mister X in Some Random Country.";
		break;
case 17:
    splashscreen.placeholder= "Time to impress the Boss?";
		break;
case 18:
    splashscreen.placeholder = "What can't you do in Program X?";
		break;
case 19:
  splashscreen.placeholder = "Time to change the world!";
		break;
case 20:
    splashscreen.placeholder = "What will you create?";
    break;
default:
	 splashscreen.palceholder = "default shoudl never see this";
   break;
}
<div id="tab1" class="tabs">
        <textarea id="editor" placeholder="" spellcheck="true" autofocus="true" ></textarea>
</div>

P.S you're welcome for using JS and not jquery @Nicholatian :P

Posted

I'm gonna cut to the chase,

 

I'm trying to change the placeholder value in my HTML document's TextArea through a JS file.

 

For the sake of privacy I've removed some text.

 

HTML (index.html) 

<!DOCTYPE html>
<html>
<LINK REL=StyleSheet HREF="main.css" TYPE="text/css" MEDIA=screen>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>Program X</title>
<body>

<div class="tabs">

    <div id="tab1" class="tabs">
        <textarea id="editor" placeholder="" spellcheck="true" autofocus="true" ></textarea>
    </div>

  </div>
</body>
<script type="text/javascript" src="index.js"></script>
</html>

 

JS (index.js) 

//This is the JS file for the index.html page

//Once the JS file is loaded, we can use it.
$(document).ready(function(){

var editor = document.getElementById("editor")

var placeholderSplashScreen = Math.floor((Math.random() * 20) + 1);

var splashscreen = document.getElementsByTagName("placeholder");

Switch(placeholderSplashScreen){
case 1:
    splashscreen.innerHTML = "Type anywhere to start!"

case 2:
    splashscreen.innerHTML = "Made using Web Technologies!";

case 3:
    splashscreen.innerHTML = "Toggle Developer Tools is your friend!";

case 4:
    splashscreen.innerHTML = "Today i'm gonna be productive!";

case 5:
  splashscreen.innerHTML = "Only the most awesome type of Program ever";

case 6:
    splashscreen.innerHTML = "Program X";

case 7:
  splashscreen.innerHTML= "Ready to do work?";

case 8:
  splashscreen.innerHTML = "All set!";

case 9:
    splashscreen.innerHTML= "What a day!";

case 10:
    splashscreen.innerHTML = "Another day at the office?";

case 11:
  splashscreen.innerHTML= "Some generic place holder goes here lol.";

case 12:
  splashscreen.innerHTML= "100% Suitable for Work";

case 13:
    splashscreen.innerHTML= "What can't be done on such a great day?";

case 14:
    splashscreen.innerHTML = "I'm so jealous that you use such amazing tools!";

case 15:
    splashscreen.innerHTML = "Time to do great things!";

case 16:
  splashscreen.innerHTML = "Made by Mister X in Some Random Country.";

case 17:
    splashscreen.innerHTML= "Time to impress the Boss?";

case 18:
    splashscreen.innerHTML = "What can't you do in Program X?";

case 19:
  splashscreen.innerHTML = "Time to change the world!";

case 20:
    splashscreen.innerHTML = "What will you create?";

}

)};

 

Thanks much :).

 

I know how to do this with the normal text but I just don't know how with placeholders.

Judge a product on its own merits AND the company that made it.

How to setup MSI Afterburner OSD | How to make your AMD Radeon GPU more efficient with Radeon Chill | (Probably) Why LMG Merch shipping to the EU is expensive

Oneplus 6 (Early 2023 to present) | HP Envy 15" x360 R7 5700U (Mid 2021 to present) | Steam Deck (Late 2022 to present)

 

Mid 2023 AlTech Desktop Refresh - AMD R7 5800X (Mid 2023), XFX Radeon RX 6700XT MBA (Mid 2021), MSI X370 Gaming Pro Carbon (Early 2018), 32GB DDR4-3200 (16GB x2) (Mid 2022

Noctua NH-D15 (Early 2021), Corsair MP510 1.92TB NVMe SSD (Mid 2020), beQuiet Pure Wings 2 140mm x2 & 120mm x1 (Mid 2023),

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

editor.setAttribute("placeholder", "New placeholder text");

I am good at computer

Spoiler

Motherboard: Gigabyte G1 sniper 3 | CPU: Intel 3770k @5.1Ghz | RAM: 32Gb G.Skill Ripjaws X @1600Mhz | Graphics card: EVGA 980 Ti SC | HDD: Seagate barracuda 3298534883327.74B + Samsung OEM 5400rpm drive + Seatgate barracude 2TB | PSU: Cougar CMX 1200w | CPU cooler: Custom loop

Link to comment
Share on other sites
Link to post
Share on other sites
Posted 
document.getElementById("editor").placeholder = 'new placeholder goes here';

Should be another option.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
5 minutes ago, Hazy125 said:

editor.setAttribute("placeholder", "New placeholder text");

I've done that but now it's giving me an error about this code:

  

$(document).ready(function(){

It tells me this: "index.js:4 Uncaught ReferenceError: $ is not defined"

Judge a product on its own merits AND the company that made it.

How to setup MSI Afterburner OSD | How to make your AMD Radeon GPU more efficient with Radeon Chill | (Probably) Why LMG Merch shipping to the EU is expensive

Oneplus 6 (Early 2023 to present) | HP Envy 15" x360 R7 5700U (Mid 2021 to present) | Steam Deck (Late 2022 to present)

 

Mid 2023 AlTech Desktop Refresh - AMD R7 5800X (Mid 2023), XFX Radeon RX 6700XT MBA (Mid 2021), MSI X370 Gaming Pro Carbon (Early 2018), 32GB DDR4-3200 (16GB x2) (Mid 2022

Noctua NH-D15 (Early 2021), Corsair MP510 1.92TB NVMe SSD (Mid 2020), beQuiet Pure Wings 2 140mm x2 & 120mm x1 (Mid 2023),

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

For those wondering:

 

I've fixed the switch statement and still nothing happens...

Judge a product on its own merits AND the company that made it.

How to setup MSI Afterburner OSD | How to make your AMD Radeon GPU more efficient with Radeon Chill | (Probably) Why LMG Merch shipping to the EU is expensive

Oneplus 6 (Early 2023 to present) | HP Envy 15" x360 R7 5700U (Mid 2021 to present) | Steam Deck (Late 2022 to present)

 

Mid 2023 AlTech Desktop Refresh - AMD R7 5800X (Mid 2023), XFX Radeon RX 6700XT MBA (Mid 2021), MSI X370 Gaming Pro Carbon (Early 2018), 32GB DDR4-3200 (16GB x2) (Mid 2022

Noctua NH-D15 (Early 2021), Corsair MP510 1.92TB NVMe SSD (Mid 2020), beQuiet Pure Wings 2 140mm x2 & 120mm x1 (Mid 2023),

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
2 minutes ago, Nicholatian said:

Instead of this: 


<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Use this: 


<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Better?

It fixes that problem but doesn't fix my original question :P

 

EDIT: Nvm. It doesn't fix it.

Judge a product on its own merits AND the company that made it.

How to setup MSI Afterburner OSD | How to make your AMD Radeon GPU more efficient with Radeon Chill | (Probably) Why LMG Merch shipping to the EU is expensive

Oneplus 6 (Early 2023 to present) | HP Envy 15" x360 R7 5700U (Mid 2021 to present) | Steam Deck (Late 2022 to present)

 

Mid 2023 AlTech Desktop Refresh - AMD R7 5800X (Mid 2023), XFX Radeon RX 6700XT MBA (Mid 2021), MSI X370 Gaming Pro Carbon (Early 2018), 32GB DDR4-3200 (16GB x2) (Mid 2022

Noctua NH-D15 (Early 2021), Corsair MP510 1.92TB NVMe SSD (Mid 2020), beQuiet Pure Wings 2 140mm x2 & 120mm x1 (Mid 2023),

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

I'm still having this issue.

 

snip.PNG

 

And my original problem isn't fixed :(.

Judge a product on its own merits AND the company that made it.

How to setup MSI Afterburner OSD | How to make your AMD Radeon GPU more efficient with Radeon Chill | (Probably) Why LMG Merch shipping to the EU is expensive

Oneplus 6 (Early 2023 to present) | HP Envy 15" x360 R7 5700U (Mid 2021 to present) | Steam Deck (Late 2022 to present)

 

Mid 2023 AlTech Desktop Refresh - AMD R7 5800X (Mid 2023), XFX Radeon RX 6700XT MBA (Mid 2021), MSI X370 Gaming Pro Carbon (Early 2018), 32GB DDR4-3200 (16GB x2) (Mid 2022

Noctua NH-D15 (Early 2021), Corsair MP510 1.92TB NVMe SSD (Mid 2020), beQuiet Pure Wings 2 140mm x2 & 120mm x1 (Mid 2023),

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
2 minutes ago, Nicholatian said:

You probably aren’t showing us the real error because you omitted the script include for the JS file you pasted.

I did.... 

<script type="text/javascript" src="index.js"></script>

 

2 minutes ago, Nicholatian said:

Make sure that jQuery comes first.

I've also done that.....

2 minutes ago, Nicholatian said:

Also, do not use jquery-latest in production – it gets updated and can break shit when you’re not looking. And please use HTTPS.

I've also tried downloading the jQuery latest stable version and put it in the same folder and referenced It.

 

And still nothing.....

  

<script type="text/javascript" language="javascript" src="jquery-3.1.1.min.js"></script>

 

Judge a product on its own merits AND the company that made it.

How to setup MSI Afterburner OSD | How to make your AMD Radeon GPU more efficient with Radeon Chill | (Probably) Why LMG Merch shipping to the EU is expensive

Oneplus 6 (Early 2023 to present) | HP Envy 15" x360 R7 5700U (Mid 2021 to present) | Steam Deck (Late 2022 to present)

 

Mid 2023 AlTech Desktop Refresh - AMD R7 5800X (Mid 2023), XFX Radeon RX 6700XT MBA (Mid 2021), MSI X370 Gaming Pro Carbon (Early 2018), 32GB DDR4-3200 (16GB x2) (Mid 2022

Noctua NH-D15 (Early 2021), Corsair MP510 1.92TB NVMe SSD (Mid 2020), beQuiet Pure Wings 2 140mm x2 & 120mm x1 (Mid 2023),

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
22 minutes ago, Nicholatian said:

You probably aren’t showing us the real error because you omitted the script include for the JS file you pasted. Make sure that jQuery comes first. Also, do not use jquery-latest in production – it gets updated and can break shit when you’re not looking. And please use HTTPS.

 

36 minutes ago, cynexit said: 

document.getElementById("editor").placeholder = 'new placeholder goes here';

Should be another option.

 

38 minutes ago, Hazy125 said:

editor.setAttribute("placeholder", "New placeholder text");

 

 if I comment the document.ready code out, it works.  IDEK.....

Judge a product on its own merits AND the company that made it.

How to setup MSI Afterburner OSD | How to make your AMD Radeon GPU more efficient with Radeon Chill | (Probably) Why LMG Merch shipping to the EU is expensive

Oneplus 6 (Early 2023 to present) | HP Envy 15" x360 R7 5700U (Mid 2021 to present) | Steam Deck (Late 2022 to present)

 

Mid 2023 AlTech Desktop Refresh - AMD R7 5800X (Mid 2023), XFX Radeon RX 6700XT MBA (Mid 2021), MSI X370 Gaming Pro Carbon (Early 2018), 32GB DDR4-3200 (16GB x2) (Mid 2022

Noctua NH-D15 (Early 2021), Corsair MP510 1.92TB NVMe SSD (Mid 2020), beQuiet Pure Wings 2 140mm x2 & 120mm x1 (Mid 2023),

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Solution

You actually need to break after every switch case.

 

https://jsfiddle.net/zmzx3hkc/2/

  

var splashscreen = document.getElementById ("editor");
var num = Math.floor((Math.random() * 20) + 1);

switch(num){
case 1:
    splashscreen.placeholder = "Type anywhere to start!"
		break;
case 2:
    splashscreen.placeholder = "Made using Web Technologies!";
	break;
case 3:
    splashscreen.placeholder = "Toggle Developer Tools is your friend!";
		break;
case 4:
    splashscreen.placeholder = "Today i'm gonna be productive!";
		break;
case 5:
  splashscreen.placeholder = "Only the most awesome type of Program ever";
		break;
case 6:
    splashscreen.placeholder = "Program X";
		break;
case 7:
  splashscreen.placeholder= "Ready to do work?";
	break;
case 8:
  splashscreen.placeholder = "All set!";
	break;
case 9:
    splashscreen.placeholder = "What a day!";
		break;
case 10:
    splashscreen.placeholder = "Another day at the office?";
		break;
case 11:
  splashscreen.placeholder = "Some generic place holder goes here lol.";
		break;
case 12:
  splashscreen.placeholder = "100% Suitable for Work";
	break;
case 13:
    splashscreen.placeholder = "What can't be done on such a great day?";
		break;
case 14:
    splashscreen.placeholder = "I'm so jealous that you use such amazing tools!";
		break;
case 15:
    splashscreen.placeholder = "Time to do great things!";
		break;
case 16:
  splashscreen.placeholder = "Made by Mister X in Some Random Country.";
		break;
case 17:
    splashscreen.placeholder= "Time to impress the Boss?";
		break;
case 18:
    splashscreen.placeholder = "What can't you do in Program X?";
		break;
case 19:
  splashscreen.placeholder = "Time to change the world!";
		break;
case 20:
    splashscreen.placeholder = "What will you create?";
    break;
default:
	 splashscreen.palceholder = "default shoudl never see this";
   break;
}
<div id="tab1" class="tabs">
        <textarea id="editor" placeholder="" spellcheck="true" autofocus="true" ></textarea>
</div>

P.S you're welcome for using JS and not jquery @Nicholatian :P

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Hey,

This is old and answered but I thought I'd chime in and give you an idea on another way to do it. Nothing wrong with you approach. But Programming is one of those thing were there are so many ways to do things it can be interesting to see how other people would approach the problem.


https://jsfiddle.net/zmzx3hkc/4/

  

var splashscreen = document.getElementById ("editor");
//input.placeholder = "No need to fill this field";

var messages = ["Type anywhere to start!"
				,"Made using Web Technologies!"
                ,"Toggle Developer Tools is your friend!"
                ,"Today i'm gonna be productive!"
				,"Only the most awesome type of Program ever"
                ,"Program X"
                ,"Ready to do work?"
                ,"All set!"
                ,"What a day!"
                ,"Another day at the office?"
                ,"Some generic place holder goes here lol."
                ,"100% Suitable for Work"
                ,"What can't be done on such a great day?"
                ,"I'm so jealous that you use such amazing tools!"
                ,"Time to do great things!"
                ,"Made by Mister X in Some Random Country."
                ,"Time to impress the Boss?"
                ,"What can't you do in Program X?"
                ,"Time to change the world!"
                ,"What will you create?"
                ,"default shoudl never see this"
                ];

var num = Math.floor((Math.random() * messages.length) + 1);
splashscreen.placeholder = messages[num];

The nice thing about this way of doing it is, you can add or remove messages as you like. And you don't have to type as much code.

 

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×