尝试创建一个将更改字体系列的按钮答案

【问题标题】：Trying to create a button that will change the font family尝试创建一个将更改字体系列的按钮
【发布时间】：2020-05-29 19:17:19
【问题描述】：

我正在处理需要按钮的作业。我希望创建一个按钮，可以从列表中随机更改字体。我有一个不起作用的按钮和一个起作用的列表。有什么建议吗？


<p id="sentance">Lets try changing the font!</p>

<select onchange="myFunction(this);" size="13">
  <option>Georgia</option>
  <option>Palatino Linotype</option>
  <option>Book Antiqua</option>
  <option>Times New Roman</option>
  <option>Arial</option>
  <option>Helvetica</option>
  <option>Arial Black</option>
  <option>Impact</option>
  <option>Lucida Sans Unicode</option>
  <option>Tahoma</option>
  <option>Verdana</option>
  <option>Courier New</option>
  <option>Lucida Console</option>
</select>

<script>
function myFunction(selectTag) {
  var listValue = selectTag.options[selectTag.selectedIndex].text;
  document.getElementById("sentance").style.fontFamily = listValue;
}
</script>

<button id='FontFamily'>Change Style!</button>

<script>
    document.getElementById('FontFamily').onclick = changeFontFamily;
    var currentFontFamily = "Monaco" 

    function changeFontFamily() {
        if (currentFontFamily == "Monaco") {
            document.body.style.fontFamily = "Times New Roman";
            currentFontFamily = "Times New Roman"
        } else {
            document.body.style.fontFamily = "Monaco";
            currentFontFamily = "Monaco"
        }
        return currentFontFamily
    }

    }
</script>

【问题讨论】：

标签： javascript html button random

【解决方案1】：

下面是我如何让按钮选择随机字体。

请记住，如果您的浏览器不识别字体（您指定），它将使用其默认字体。这就是为什么在运行下面的代码 sn-p 时单击 Change Style 按钮时可能不会总是看到字体更改的原因。

// For selecting a random number in a range:
function randomNumberBetween(iLowest,iHighest)
{
	var iChoices = iHighest	- iLowest + 1;
	return Math.floor(Math.random() * iChoices + iLowest);
}

// Fonts with spaces need quotes in CSS
function quoteFontsContainingSpaces(font)
{
  if (font.includes(" "))
  {
    font = `"${font}"`;
  }
  return font;
}

let sentence = document.getElementById("sentence");
let selectorFontList = document.getElementById("selectorFontList");

function onFontChangeEventHandler(e)
{
  let fontString = quoteFontsContainingSpaces(this.value);
  sentence.style.fontFamily = fontString;
}

selectorFontList.addEventListener("change", onFontChangeEventHandler);

let btnChangeRandom = document.getElementById("btnChangeRandom");

btnChangeRandom.addEventListener('click', function()
{
  let rIndex = randomNumberBetween(0,selectorFontList.length - 1);
  selectorFontList.selectedIndex = `${rIndex}`;
  let event = new Event('change');
  selectorFontList.dispatchEvent(event);
});

#selectorFontList
{
  height: 100px;
}

<p id="sentence">Lets try changing the font!</p>
<button id='btnChangeRandom'>Change Style!</button>
<br>
<select id="selectorFontList" size="13">
  <option>Georgia</option>
  <option>Palatino Linotype</option>
  <option>Book Antiqua</option>
  <option>Times New Roman</option>
  <option>Arial</option>
  <option>Helvetica</option>
  <option>Arial Black</option>
  <option>Impact</option>
  <option>Lucida Sans Unicode</option>
  <option>Tahoma</option>
  <option>Verdana</option>
  <option>Courier New</option>
  <option>Lucida Console</option>
</select>

【讨论】：